在反应本机中以不同方式对齐两个孩子 [英] Align two children differently in react native

问题描述

我想要一个标题，该标题的左边有一个后退按钮，而标题的中央是一个文本/标题.

I'd like to have a header with a back button to the left and a text/title in the center of the header.

赞:

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

我正在尝试在styles.topbar中使用flex，但是我尝试的一切似乎都没有效果.

I'm trying to use flex in styles.topbar but nothing of what I tried seems to work.

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

I am pretty new to flex and React Native so some help with the styles would be great.

谢谢.

推荐答案

在这里:

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

上面的代码将在左上角打印返回按钮，并在中间显示文本.弯曲方向用于指示要在行方向上打印的视图.

The above code will print back button at the top left and text at the center. Flex direction is used to indicate view to print in a row direction.

这篇关于在反应本机中以不同方式对齐两个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！