Почему мой ScrollView скрывает мое изображение в React Native?

Question

Я хочу добавить scrollView на моем экране после текста и изображения.

return (
    <View>
        <Text>Name</Text>
        <Image source = {{uri : 'myUri' }} style = {styles.image}/>                 
        <ScrollView>
            <View>
                <Text>City</Text>
                <Text>Tokyo</Text>
            </View>

            <View>
                <Text>Language</Text>
                <Text>Japanese</Text>
            </View>
        </ScrollView>
    </View>
);

Вот стиль моего изображения:

image: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain',
    marginTop: 3,
    marginBottom: 3,
},

Изображение никогда не появляется с scrollView.

Answer 1

Вы указали длину для своего ScrollView?

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

Вам может потребоваться изменить высоту изображения с помощью определенного значения, или вы можете объединить текст и изображение в другом представлении и присвоить этому виду определенную высоту.

<View style = {styles.customStyle}> // change your style here
   <Text>Name</Text>
   <Image source = {{uri : 'myUri' }} style = {styles.image}/>
</View>