тег, работающий по-разному в iOS и Android для приложения React

#android #ios #reactjs #image #react-native

#Android #iOS #reactjs #изображение #react-native

Вопрос:

Версия для Android

Версия для iOS

 <View style={styles.spaceP}>
        <Collapse>
            <CollapseHeader>
                <Separator bordered style={styles.dropHeader}>
                    <Text style={styles.dropHeaderText}>Airports of Quito and Guayaquil</Text>
                </Separator>
            </CollapseHeader>
            <CollapseBody>
                <ListItem >
                    <Text style={styles.dropBodyText}>In the airports of Quito and Guayaquil prior to the check-in with your airline you must:{"n"}{"n"}
                    <Text style={{ fontWeight: 'bold' }}>Step 1:</Text> Register with the Galapagos Government Council Office to obtain your Transit Control Card (TCT) cost of the TCT is $20.00{"n"}{"n"}
                    <Text style={{ fontWeight: 'bold' }} onPress={ ()=> Linking.openURL('https://siiws.gobiernogalapagos.gob.ec/siicgg_web/') } >Fill out the Previous Registration Form for the TCT here </Text>{"n"}{"n"}
                    <Text style={{ fontWeight: 'bold' }} onPress={ ()=> Linking.openURL('https://siiws.gobiernogalapagos.gob.ec/siicgg_web/') } >Fill out the New Registration Form for the TCT here </Text>{"n"}{"n"}
                    <Text style={{ fontWeight: 'bold' }}>Step 2:</Text> Check your baggage in the Galapagos ABG Biosecurity Control and Regulation Agency{"n"}{"n"}
                    <Text style={{ fontWeight: 'bold' }}>Step 3:</Text>At Baltra and San Cristobal airports: As an entrance tax to the protected areas of Galapagos, an entrance tax will be charged, the prices of which are detailed below:{"n"}{"n"}
                    <Image
                        source={require('../../app/assets/images/image_tct.jpg')}
                        style={{
                        alignSelf: 'center',
                        height: 350,
                        width: 300*rem
                        
                        }}
                        resizeMode="stretch"
                        />    
                    <Text style={{ fontWeight: 'bold' }}>Step 4:</Text>An ABG inspector from the Agency for the Regulation and Control of Biosecurity for Galapagos will check your suitcase to make sure that no organic products that may bring organisms that threaten the Galapagos ecosystems are entering.</Text>
                    
                </ListItem>
            </CollapseBody>
        </Collapse>
 

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

Ответ №1:

resizeMode="stretch" может конфликтовать со width height свойствами и .

Вы можете использовать конкретные значения для изображения

 import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
 

или используйте их автоматически