如何在 react-native 中设置左侧的后退按钮样式？

【问题标题】：how to set back button style on left side in react-native?如何在 react-native 中设置左侧的后退按钮样式？
【发布时间】：2021-10-28 15:26:16
【问题描述】：

我想把后退按钮放在标题的左边。

<View style={styles.header}>
      <AntDesign style={styles.backBtn} name="arrowleft" size={24} color="black" />
      <Text style={styles.headerText}>My Page</Text>
 </View>


//style
header: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    backBtn: {
        marginTop: 35,
        alignItems: 'flex-start',
        backgroundColor: 'blue'
    },
    headerText: {
        fontWeight: 'bold',
        fontSize: 18,
        marginTop: 35,
        backgroundColor: 'red'
    },

[在此处输入图片描述][1]

我想像 flex-start 一样设置返回按钮 [1]：https://i.stack.imgur.com/2sSH1.png

【问题讨论】：

标签： css react-native

【解决方案1】：

只需将您的AntDesign 图标包装在视图中，并为其赋予 1 的 flex。这样它就会占用父视图中剩余的所有空间。然后将alignSelf: 'center' 添加到Text 组件中，使其与View 的中心对齐

你可以这样做

<View style={styles.header}>
  <AntDesign name="arrowleft" size={24} color="black" style={styles.backBtn} />
  <View style={{ flex: 1 }}>
    <Text style={styles.headerText}>My Page</Text>
  </View>
</View>

和样式

header: {
  flexDirection: 'row',
  width: width,
  backgroundColor: 'red',
},
backBtn: {
  backgroundColor: 'blue',
},
headerText: {
  fontWeight: 'bold',
  fontSize: 18,
  backgroundColor: 'red',
  alignSelf: 'center',
},

Working Example

【讨论】：