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
    Commented 17 июн. 2021 в 16:37
0

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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