2016-09-17 19 views
10

स्क्रॉल नहीं जब मैं नीचे इस उदाहरण की तरह सामग्री लपेट, यह पूरी तरह से स्क्रॉल ..प्रतिक्रिया-मूल निवासी, स्क्रॉल देखें

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> घटकों को जोड़ने का प्रयास करें। आप भी अपने कोड पर लिखने में कोई त्रुटि है:

<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> लाइन 9. में एक उदाहरण कोड इस तरह दिखेगा आपका करीब 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

फ्लेक्स जोड़ने: 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> 
) 
} 
संबंधित मुद्दे