Question

我有一张图片，应该放在标题的右侧。我已经尝试过，它在android设备中运行良好。但是在IOS中，图像显示在左侧。请检查我的代码，

export default class Header extends Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <View style={styles.header}>
            <View style={styles.logoContainer}>
                <Text style={{textAlign: 'right'}}>
                    <Image
                        style={styles.logo}
                        resizeMode={'contain'}
                        source={require('../../../../assets/logo.png')}
                    />
                </Text>
                <TouchableOpacity
                    onPress={() =>
                        this.props.navigation.navigate('AffiliateInfo')
                    }
                >
                    <Text style={{textAlign: 'right'}}>
                        <Image
                            style={styles.agile}
                            source={require('../../../../assets/agile.png')}
                        />
                    </Text>
                </TouchableOpacity>
            </View>
            <Image
                style={styles.navImage}
                source={require('../../../../assets/nav.png')}
            />
        </View>
    );
}
}

const styles = StyleSheet.create({
header: {
    backgroundColor: '#0d2c4f',
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 30,
    paddingBottom: 30,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end'
},
logoContainer: {
    flex: 1
},
logo: {
    width: 200,
    height: 50,
    resizeMode: 'contain'
},
agile: {
    width: 100,
    height: 30,
    resizeMode: 'contain'
},
navImage: {
    width: 40,
    height: 15,
    resizeMode: 'contain',
    marginLeft: 20
}
});

logo.png 和 agile.png 图片应放置在右侧。在iOS中有什么要做的事情吗？任何解决方案将不胜感激。我真的被困在这里。

Answer 1

您可以使用alignItems

< View style={{ alignItems: 'flex-end', width: 100, height: 30 }} >
  <Image
    style={styles.agile}
    source={require('../../../../assets/agile.png')}
  />
< View />

无法将图像放置在右侧以产生自然反应

1 个答案: