React-Native 对齐问题答案

【问题标题】：React-Native Align IssueReact-Native 对齐问题
【发布时间】：2017-02-02 14:24:16
【问题描述】：

我只希望图标位于左侧，文本位于中心。

我有这个结构：

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

有点像这样：

-> 主容器

--> HeaderContainer

---->返回按钮

----> 标题

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 />，但是结果不好：

如您所见，它并没有真正居中。

编辑制作：

它并没有真正居中，因为我们放置了一个虚构的第三元素。我们可以只用两个元素吗？一个在开始，另一个在中心？

为什么不可行？

【问题讨论】：

标签： css react-native flexbox

【解决方案1】：

尝试以下方法：

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

如果中心组件是<Text>，请不要忘记设置textAlign: 'center'；如果右侧组件是Text，请不要忘记设置textAlign: 'right'。

【讨论】：

@MarcoNoronha 你把textAlign: center 添加到header了吗？
是的@binchik。我没有忘记你的笔记。
@MarcoNoronha 尝试将flex: 1 添加到标题中。

【解决方案2】：

将您的图标和文本放在单独的视图中，并为其分配一个像这样的 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>

我认为它应该解决问题

【讨论】：

感谢您的回答。虽然差不多。文本没有以 100% 的宽度居中。这有点像我对“空间之间”的解决方法所做的。 :( 另外，当没有按钮时，这会中断。