以两种不同的方式对齐两个孩子

时间:2016-12-18 20:32:55

标签: javascript reactjs react-native flex header

我想要一个标题,左边有一个后退按钮,标题中间有一个文本/标题。

像这样:

<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的新手,所以对样式的一些帮助会很棒。

谢谢大家。

1 个答案:

答案 0 :(得分: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>

上面的代码将在左上方打印后退按钮,在中间打印文本。柔性方向用于指示要在行方向上打印的视图。