将按钮添加到 React Navigation header 的 header

Question

我有我的这个组件...我想在其中绘制注销按钮并隐藏后退箭头。但我不能这样做。谁能告诉我我哪里做错了？我也遵循了反应导航的原始文档，但没有解决方案。

class Welcome extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      user: this.props.navigation.state.params.user,
     }
  }

  static navigationOptions = ({ navigation}) =>  {
    const { params = {} } = navigation ; 
    return {
      headerTitle : "Welcome",
      headerLeft: null,
      headerRight : (
        <TouchableOpacity
         style={{ backgroundColor: '#29434e' , padding: 10}}
         onPress={() => params.onlogout}
       >
         <Text style={{ marginVertical:5, color: 'rgba(255,255,255,0.7)', fontSize: 20,}}> Logout </Text>
       </TouchableOpacity>   
      ) 
    };
  };

  _Logout = () => {
   this.props.Signout();
  };

  componentDidMount() {
    this.props.navigation.setParams({ onlogout : this._Logout , isSaving: false})
  }

    }
}

const mapDispatchToProps = (dispatch) => {
  return {
    Signout: () => dispatch(Signout())
  }
}

export default connect(null,mapDispatchToProps)(Welcome)

Answer 1

那是因为 marginVertical:10 你的 Text 风格。删除它，您应该会看到您的按钮。

这是一个工作示例：https://snack.expo.io/rJOSqqEHS

Answer 2

所以问题是组件没有使用静态导航选项获取 header 选项，但是当我尝试 defaultNavigationOptions 时它工作完美，代码如下：

const otherApp = createStackNavigator({
  Welcome : { 
    screen : WelcomeScreen
  }
},
{
  defaultNavigationOptions : ({navigation}) => ({
    title : 'Welcome',
    headerStyle: {
      backgroundColor: '#29434e',
      shadowColor: 'transparent',
      elevation: 0
    },
    headerRight: (
      <TouchableOpacity
        style={{ backgroundColor: '#DDDDDD', padding: 5 }}
        onPress={() => navigation.getParam('logout')}>
        <Text
          style={{
            fontSize: 10,
          }}>
          Logout
        </Text>
      </TouchableOpacity>
    ),
  })
});

希望它能对以后的人有所帮助。我的环境是：

"react": "16.8.6",
"react-native": "0.60.3",
"react-navigation": "^3.11.0",

将按钮添加到 React Navigation header 的 header

Add button to header of React Navigation header

react-native

react-navigation

react-navigation-stack