在本机反应中以不同方式对齐两个 children

Question

我想要一个 header，左侧有一个后退按钮，header 中间有一个 text/title。

像这样：

<View style={styles.topbar}>
    <TouchableOpacity>
        <Text style={styles.topbarButton}>{" <"}</Text>
    </TouchableOpacity>
    <View>
        <Text style={styles.topbarText}>Title</Text>
    </View>
</View>

我正在尝试在 styles.topbar 中使用 flex，但我尝试过的似乎都不起作用。

我对 flex 和 React Native 还很陌生，所以对样式的一些帮助会很棒。

谢谢大家

Answer 1

开始吧：

<View style={{width:devicewidth,flexDirection:'row',height:40,top:0,position:'absolute'}}>
   <TouchableOpacity style={{left:0,position:'absolute',alignItems:'flex-    start'}}>
      <Text style={styles.topbarButton}>{" <"}</Text>
   </TouchableOpacity>
     <View style={{justifyContent:'center'}}>
      <Text style={styles.topbarText}>Title</Text>
     </View>
</View>

以上代码将在左上角打印后退按钮，在中间打印文本。 Flex direction 用于指示视图以行方向打印。

在本机反应中以不同方式对齐两个 children

Align two children differently in react native

javascript

reactjs

react-native

apache-flex

header