Слетает стиль приложения, когда оборачиваю компоненты в ScrollView

Question

Знакомлюсь с react-native и столкнулся с такой проблемой: когда добавляю ScrollView и в него помещаю контент, то слетает стиль приложения. Как решить данный вопрос?

До того, как добавил ScrollView:

После добавления ScrollView:

function Weather({ temp, city, condition, daily, hourly }) {
  return (
    <LinearGradient
      colors={weatherOptions[condition].gradient}
      style={styles.container}
    >
      <StatusBar style="light" />
      <ScrollView>
        <View style={styles.topContainer}>
          <MaterialCommunityIcons
            name={weatherOptions[condition].iconName}
            size={96}
            color="#fff"
          />
          <Text style={styles.text}>{city}</Text>
          <Text style={styles.text}>{temp}℃</Text>
        </View>
        <View style={styles.bottomContainer}>
          <WeatherDaily daily={daily} />
          <WeatherHourly hourly={hourly} />
          <DetailedDailyForecast />
        </View>
      </ScrollView>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text: {
    fontSize: 28,
    color: "white",
  },
  image: {
    width: 100,
    height: 100,
  },
  topContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  bottomContainer: {
    flex: 1,
  },
});

Answer 1

Насколько я понял по скриншотам, Ваша проблема в том, что ScrollView двигает остальные компоненты вверх во время прокрутки. Если это так, то это происходит потому-что вы обернули весь свой экран в ScrollView , а должны были обернуть те компоненты, которые хотели бы скроллить (элементы списка, например). При этом желательно наделить ScrollView стилями, как в cлудующем коде: <ScrollView style={{flex: 1, padding: 10}}>. Это поможет привязать ScrollView внутри экрана и не даст ему убегать вверх или вниз. Оставьте комментарий, если это решение не поможет.

Answer 2

А если для ScrollView прописать так:

<ScrollView
   contentContainerStyle={{
     flex: 1
  }}
>
  /* остальной контент */
</ScrollView>

БЛОГ НА HUSL

Слетает стиль приложения, когда оборачиваю компоненты в ScrollView

Ответы (2 шт):