2016-09-17 3 views
10

Когда я обернуть содержание как в этом примере ниже, она прокручивается Прекрасно ..React-Native, Scroll View Не прокрутке

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> 
); 

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

ответ

7

Попробуйте добавить 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> 
15

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

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

); 
+1

добавление flex: 1 действительно исправляет его! Спасибо. это должно быть принято ответ –

1

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

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> 
) 
}