ScrollView, заставляющий представление исчезать в React Native

Question

Я новичок, чтобы реагировать на родной язык, у меня есть экран, который довольно длинный, и когда мне нравится использовать scrollview для того, чтобы разрешить просмотр всего важного при прокрутке.

Когда я добавляю scrollview, информация исчезает и я не знаю почему. Как лучше всего это исправить?

Экран без прокрутки

Экран с прокруткой

Вот мой код.

export default class FindScreen extends React.Component  {
   render() {
    return (
        <View style={{height: 200}}>

            <Image
          style={{width: '100%', height: '100%'}}
          source={require('./image.png')}
        />

        <ScrollView>
        <View> 
        <Text style={styles.MainText}>Directions</Text>
        <View style={styles.MainView}>
            <Text style={styles.AddressText}>Address
            {'\n'}
            Address
            {'\n'}
            Address
            {'\n'}
            Address</Text>

     <View>
            <Entypo name="location-pin" size={30} color={'#E8AA65'}  style={styles.IconImage}  />
            </View>
    </View>
    
        <View>
            <Text style={styles.MainText}>Phone</Text>
            <View style={styles.MainView}>
            <Text style={styles.AddressText}>+44 0000 000000</Text>
            <View>
            <Entypo name="phone" size={30} color={'#E8AA65'}  style={styles.IconImage2}  />
            </View>
        </View>
        </View>

        <View>
            <Text style={styles.MainText}>Email</Text>
            <View style={styles.MainView}>
            <Text style={styles.AddressText}>example@gmail.com</Text>
            
            <Entypo name="mail" size={30} color={'#E8AA65'}  style={styles.IconImage3}  />
            </View>
        </View>
        </View>
        </ScrollView>
        </View>
    )
   }
}

const styles = StyleSheet.create({
MainText: {
paddingLeft: 20,
paddingTop: 40,
fontSize: 16,
color: '#E8AA65'
}, 

MainView:
 {
    flexDirection: 'row', 
 },

 IconImage: {
    paddingLeft: 160,
    paddingTop: 45,
    
 },

 IconImage2: {
    paddingLeft: 160,
    paddingTop: 15

 },

 IconImage3: {
    paddingLeft: 70,
    paddingTop: 20

 },


AddressText: {
    paddingLeft: 20,
    paddingTop: 20,
    fontSize: 16
}
  
});

Answer 1

Ваш первый просмотр имеет только 200 в высоту ... и это инкапсулирует весь контент .. Вы, вероятно, хотели только на изображении, поэтому измените первый на flex:1 и создайте другой с 200 высотой

export default class FindScreen extends React.Component  {
render() {
return (
  <View style={{flex: 1}}>
    <View style={{height: 200}}>

        <Image
      style={{width: '100%', height: '100%'}}
      source={require('./image.png')}
    />
    </View>
    <ScrollView>
    <View> 
    <Text style={styles.MainText}>Directions</Text>
    <View style={styles.MainView}>
        <Text style={styles.AddressText}>Address
        {'\n'}
        Address
        {'\n'}
        Address
        {'\n'}
        Address</Text>

 <View>
        <Entypo name="location-pin" size={30} color={'#E8AA65'}  style={styles.IconImage}  />
        </View>
</View>

    <View>
        <Text style={styles.MainText}>Phone</Text>
        <View style={styles.MainView}>
        <Text style={styles.AddressText}>+44 0000 000000</Text>
        <View>
        <Entypo name="phone" size={30} color={'#E8AA65'}  style={styles.IconImage2}  />
        </View>
    </View>
    </View>

    <View>
        <Text style={styles.MainText}>Email</Text>
        <View style={styles.MainView}>
        <Text style={styles.AddressText}>example@gmail.com</Text>

        <Entypo name="mail" size={30} color={'#E8AA65'}  style={styles.IconImage3}  />
        </View>
    </View>
    </View>
    </ScrollView>
    </View>
)
}
}

const styles = StyleSheet.create({
MainText: {
paddingLeft: 20,
paddingTop: 40,
fontSize: 16,
color: '#E8AA65'
}, 

MainView:
{
   flexDirection: 'row', 
},

IconImage: {
   paddingLeft: 160,
   paddingTop: 45,

},

IconImage2: {
  paddingLeft: 160,
  paddingTop: 15

},

IconImage3: {
  paddingLeft: 70,
  paddingTop: 20

},


AddressText: {
  paddingLeft: 20,
  paddingTop: 20,
  fontSize: 16
}

});