我想把字符串 'example' 放在标题的中间。
代码:
<View style={viewStyle}>
<ImageButton
imageUrl={require('./assets/icons/Back-25.png')}
onPress={props.onPressPhone}
/>
<Text>{props.headerText}</Text>
</View>
View 样式:
backgroundColor: 'white',
alignItems: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2,
elevation: 2,
position: 'relative',
flexDirection: 'row',
justifyContent: 'space-between',
图片按钮样式:
alignSelf: 'center',
最佳答案
一种方法是在另一侧使用相同大小的空 .png 图像,并在标题样式中使用空格:
<View style={ styles.header }>
<Button style={{left: 10}} onPress={ () => this.handlePress() }>
<Image source={ require('../images/arrow_back.png') } style={{ width: 50, height: 50 }} />
</Button>
<Text style={styles.header_text} >{this.props.title}</Text>
<Button style={{right: 10}}>
<Image source={ require('../images/no_image.png') } style={{ width: 50, height: 50 }} />
</Button>
</View>
和
header: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: width,
backgroundColor: '#09146d',
},
...有点笨拙,但它对我有用。或者,您可以使用 flexDirection: 'row' 将标题与基于 flex 的 View 分开:
<View style={ styles.header }>
<View style={{flex: 1}}>
//Button in here
</View>
<View style={{alignItems: 'center', flex: 6}}>
//Text in here
</View>
<View style={{flex: 1}}>
//Nothing in here
</View>
</View>
祝你好运!
关于react-native - 将左侧的后退按钮和中间的文本对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43824316/