反应原生标题标题位置答案

【问题标题】：react native header title position反应原生标题标题位置
【发布时间】：2017-09-03 10:28:22
【问题描述】：

如何在 react native 中将标题标题的位置更改为右侧：

代码是：

Home: {
screen: BookViewContainer ,
navigationOptions: ({navigation}) => ({
  headerRight: <DrawerIcon iconDefault='menu' tintColor={Constants.styles.secondColor} size={30}/>,
  title: Strings.book_label,
  headerStyle: {
    backgroundColor: Constants.styles.mainColor
  },
  headerTintColor: Constants.styles.secondColor
})},

在 ios 中，它在中间显示标题，在左侧显示返回按钮，在右侧显示菜单按钮，这没关系，但对于 android，我需要在右侧显示标题，在左侧显示返回按钮

请帮忙

【问题讨论】：

标签： react-native navigation styles react-native-android

【解决方案1】：

对于 android 我添加了这一行：

headerTitleStyle: {
   alignSelf: (Platform.OS === 'android') ? 'flex-end' : 'center'
}

例如，对于 Home sense，我使用如下代码：

Home: {screen: BookViewContainer , navigationOptions: ({navigation}) => ({
  title: 'test title',
  headerStyle: {
    backgroundColor: 'red'
  },
  headerTintColor: 'blue',
  headerTitleStyle: {
    alignSelf: (Platform.OS === 'android') ? 'flex-end' : 'center'
  }
 })},

【讨论】：

【解决方案2】：

另一个棘手的方法是使用 absolute 和 zindex 道具来实现，如果你使用的是 react-native-base

<Button transparent>
    <View style={{}}>
        <Icon name="more-vert" style={{
            zIndex:-999 ,
            position:'absolute',
            right:0,
            top:0,
            }}/>
        <Picker
            style={{
              zIndex:999,
              position:'absolute',
              //right:0,
              top:-35,
              backgroundColor:'transparent',
            }}
            onValueChange={()=>{}}
            mode="dropdown">
            <Item label="Wallet" value="key0" />
            <Item label="ATM Card" value="key1" />
        </Picker>
    </View>  
</Button>

【讨论】：