我只想让Icon位于左侧,文本位于中心位置。
我有这个结构:
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
<Text style={styles.header}>{ title }</Text>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
有点像这样:
- &GT; mainContainer上
- &GT; HeaderContainer
----&GT;后退按钮
----&GT;标题
mainContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-start'
},
headerContainer: {
flex: 1,
padding: 10,
flexDirection: 'row',
// ommited for clarity
},
back: {
alignSelf: 'flex-start'
},
header: {
fontSize: 24,
alignSelf: 'center'
},
我也尝试过添加HeaderContainer:
justifyContent: 'space-between',
和空白<View />
,但效果不佳:
正如你所看到的,它并没有真正集中。
修改制作:
它并没有真正居中,因为我们设置了一个想象中的第三元素。我们可以只用两个元素来做吗?一个在开始,另一个在中心?
为什么它不可能?
答案 0 :(得分:0)
尝试以下方法:
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
{leftContent}
</View>
<View style={{ flex: 1, alignItems: 'center' }}>
{centerContent}
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
{rightContent}
</View>
</View>
如果正确的组件为textAlign: 'center'
,请勿忘记设置<Text>
,如果中心组件为textAlign: 'right'
或Text
。
答案 1 :(得分:0)
将你的Icon和文本放在不同的视图中,然后将flex设置为类似这样的
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
<View style={{flex:.3,alignSelf:'flex-start}}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
</View>
<View style={{flex:.7,alignSelf:'flex-end',alignItems:'center'}}>
<Text style={styles.header}>{ title }</Text>
</View>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
我认为它应该解决问题