React-Native, Scroll View Not Scrolling

Когда я обертываю содержимое, как показано в примере ниже, оно прекрасно прокручивается..

return(
    <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        ...
    </ScrollView>
);

Однако всякий раз, когда я оборачиваю его в другой вид, он не будет прокручиваться.

return(
    <View>
        <ScrollView>
            <Text> TEST </Text>
            <Text> TEST </Text>
            <Text> TEST </Text>
            <Text> TEST </Text>
            ...    
        </SCrollView>
    </View>
);

Есть ли какое-то решение этой проблемы? Я пытаюсь поместить заголовок навигационной панели над всем содержимым, хотя не могу понять это.

Ответы

Ответ 1

Это опечатка: твой ScrollView тег ScrollView: </SCrollView> вместо </ScrollView> И </ScrollView> нужно добавить стиль в контейнер View, поэтому твой код должен быть таким:

return(
<View style={{flex: 1}}>
  <ScrollView>
    <Text> TEST </Text>
    <Text> TEST </Text>
    <Text> TEST </Text>
    <Text> TEST </Text>
       ...    
  </ScrollView>
</View>

);

Ответ 2

Попробуйте добавить компоненты style={{flex:1}} в <View> и <ScrollView>. У вас также есть опечатка на вашем коде: </SCrollView> в строке 9. Пример кода будет выглядеть так:

<View style={{backgroundColor:'white', flex:1}}>
    <NavigationBar title="Title" />
    <ScrollView style={{flex:1, backgroundColor:'white'}}>
            <View style={{flex:1,justifyContent:'center'}}>
                <RegisterForm />
            </View>
    </ScrollView>
</View>

Ответ 3

Попробуйте следующий код:

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <Text> TEST </Text>
  <Text> TEST </Text>
  <Text> TEST </Text>
  <Text> TEST </Text>
</ScrollView>

Ответ 4

Другим решением является добавление свойства height в родительский контейнер View. Это иногда хорошо работает при расчете высоты по высоте экрана.

render () {
  const screenHeight = Dimensions.get('window').height

  return(
    <View style={{height: screenHeight}}>
      <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
           ...    
      </ScrollView>
    </View>
  )
}