React Native 的自定义标题布局答案

【问题标题】：Custom header layout for React NativeReact Native 的自定义标题布局
【发布时间】：2018-02-02 08:09:05
【问题描述】：

试图在 react-native 中构造一个标头。我已经做到了这一点，但我想让标题居中并且正确的文本右对齐。有没有使用 flexbox 的简单组合来实现这一点？

   <View style={{marginTop: 20, backgroundColor:'yellow'}}>
       <View style={{flex: 1, flexDirection: 'row', alignItems:'center', justifyContent:'space-between', marginTop: 20, marginBottom: 20, borderColor:'red', borderWidth:1}}>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Left with long text</Text>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Title</Text>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Right</Text>
       </View>
    </View>

【问题讨论】：

“我想让标题居中”是什么意思？
textAlign: 'right' 将修复“正确”文本。现在怎么不居中了？
你希望标题是什么样子的任何图片？
顺便说一句，justifyContent:'center', 可能会覆盖第三项的textAlign，因此如果保留justifyContent，请将其设为justifyContent:'flex-end',

标签： layout react-native flexbox

【解决方案1】：

对于这种情况，您可以使用 react-native-falt-header 库。这个库支持您对中心、左右文本和按钮处理程序的所有需求。

https://www.npmjs.com/package/react-native-flat-header

示例：

<FlatHeader
    leftIcon={<Icon name="arrow-left" size={30} color="#FFF" />}
    leftText="back"
    leftContentHandler={() => {
        console.warn('Left both icon and text pressed');
    }}
    centerContent={
        <Group>
            <Icon name="comment" size={30} color="#FFF" />
            <Text style={{ color: '#FFF', paddingHorizontal: 5 }}>FAQ</Text>
        </Group>
    }
    rightIcon={<Icon name="star" size={30} color="#FFF" />}
    style={{ marginTop: 20, backgroundColor:'yellow' }}
    />

【讨论】：

你可能应该披露你拥有/运行这个库。

【解决方案2】：

如果我理解您的问题正确，此代码将解决您的问题：

      <View style={{paddingTop: 20, paddingBottom: 20, backgroundColor:'yellow'}}>
        <View style={{flexDirection: 'row', alignItems:'center', borderColor:'red', borderWidth:1}}>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1}}>Left with long sd asdf text</Text>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1, textAlign: 'center'}}>Title</Text>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1, textAlign: 'right'}}>Right</Text>
        </View>
      </View>

【讨论】：