react-native - 将按钮添加到 React Navigation 标题的标题

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)

标签： react-nativereact-navigationreact-navigation-stack

Answer 1

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

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