React Native的自定义标题布局 [英] Custom header layout for React Native

问题描述

尝试在react-native中构造标头.我设法做到了这一点，但我想使标题居中并使正确的文本右对齐.是否有任何使用flexbox的简单组合来实现这一目标?

Trying to construct a header in react-native. I have managed to get this far but I wanted to have the header centered and the right text right-aligned. Is there any simple combination using flexbox to achieve this?

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

推荐答案

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

If I understand you issue correctly this code will solve your problem:

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

这篇关于React Native的自定义标题布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！