0

Знакомлюсь с 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,
  },
});

2 ответа 2

0

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

1
  • Нет, проблема возникает не при прокрутке. Как только я оборачиваю все компоненты в ScrollView, сохраняю изменения и компоненты подскакивают вверх, тобишь стилизация меняется. По поводу того, что обернул весь свой экран в ScrollView, я так и хочу, чтобы можно было ниже пролистать и просмотреть другие компоненты, которые там будут.
    – Vladislove
    17 июн 2021 в 16:37
0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.