React-Native Align问题

时间:2017-02-02 14:24:16

标签: css react-native flexbox

我只想让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'
  },

但它不起作用,因为它产生: enter image description here

我也尝试过添加HeaderContainer:

justifyContent: 'space-between',

和空白<View />,但效果不佳:

enter image description here

正如你所看到的,它并没有真正集中。

修改制作:

enter image description here

它并没有真正居中,因为我们设置了一个想象中的第三元素。我们可以只用两个元素来做吗?一个在开始,另一个在中心?

为什么它不可能?

2 个答案:

答案 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>

我认为它应该解决问题