React-native-router-flux renderRightButton() 方法

Question

我正在尝试呈现导航栏自定义右键。

React-native-router-flux 版本：^3.43.0

代码如下所示：

<Scene
  initial
  key="RegistrationType"
  navigationBarStyle={Style.navBarStyleBlue}
  renderRightButton={() => (
    <View style={{
      backgroundColor: 'yellow',
      height: 50,
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <TouchableOpacity onPress={Actions.Login}>
        <Text>Login</Text>
      </TouchableOpacity>
    </View>
  )}
  component={RegistrationType}
  title=""
  hideNavBar={false}
/>

导航栏的风格：

navBarStyleBlue: {
  backgroundColor: 'blue',
  borderBottomWidth: 0,
  height: 50
},

所以基本上我试图让右按钮与导航栏垂直对齐并得到这样的东西：

但是我得到了这个：

有什么想法吗？

Answer 1

想通了。 必须使用 rightButtonStyle 属性。

rightButtonStyle={{
  top: 0,
  height: 50,
  padding: 0,
  justifyContent: 'center',
  alignItems: 'center'
}}