react-native - 无法在 StackNavigator 中显示对话框 - React Native

Question

嗨，我在按下headerRightStackNavigator 中的按钮时显示对话框时遇到问题。我收到一条错误消息：_this.setState 不是函数。（在 _this.setState({visible:true})） _this.setState 是 undefined。这是我的代码：

state = {
  visible: false,
};

_showDialog = () => this.setState({ visible: true });

_hideDialog = () => this.setState({ visible: false });



const AppStackNavigator = createStackNavigator({
  DrawerNavigator:{
    screen: DrawerNavigator,
    navigationOptions: ({navigation}) => ({
      title: 'Fabiola Voyance',
      headerTintColor: 'white',
      headerStyle: {
        backgroundColor: '#8cc866',
      },
      headerMode: 'none',
      headerLeft: (
            <TouchableOpacity style={{marginLeft: 10 }} onPress={ () =>{ navigation.openDrawer()}}>
                <Icon color="white" name="menu" size={30}  />
            </TouchableOpacity>
        ),
    }),
  },
    Accueil: {
    screen: Accueil,
    navigationOptions: {
      title: 'Horoscope',
      headerTintColor: 'white',
      headerStyle: {
        backgroundColor: '#8cc866',
      },
    },
  },
  VoyanteProfil: {
    screen: VoyanteProfil,
    navigationOptions: (navigation) => ({
      headerTintColor: 'white',
      headerStyle: {
        backgroundColor: '#8cc866'
      },
      headerMode: 'none',
      headerRight: (
        <TouchableOpacity onPress = {() => {this._showDialog()} }>
          <View style={{borderRadius: 30, overflow: 'hidden', alignItems: 'center',backgroundColor:'white', justifyContent: 'center', marginRight:20 }}>
            <Image style={{ width:35, height: 35 }} source={require("../Images/icone-sonnerie.png")}/>
            <Dialog
                animationType =  "fade"
                contentStyle= {
                  {
                    alignItems:"center",
                    justifyContent:"center",
                  }
                }
                visible={this.state.visible}
                onDismiss={this._hideDialog}>
                <View>
                  <Text style = {{textAlign: 'center', fontSize:18}}>La Voyance Privée offre une consultation sans attentes, sans limite de temps et sans interruption</Text>
                </View>
                <View style = {{marginTop:15,marginBottom:15}}>
                  <MyButton style={{}} text={"Voyance privée\nouvert 24h/24\n"} icone='icone-transfert'/>
                </View>
                <View>
                  <Text style = {{textAlign:'center', fontSize:18}}>La Voyance Directe sans CB permet de choisir un des Médiums présents sur le moment</Text>
                </View>
                <View style = {{marginTop:15,marginBottom:15}}>
                  <MyButton text={"Voyance sans CB\nouvert 24h/24\n"} icone='icone-sonnerie'/>
                </View>

            </Dialog>
         </View>
         </TouchableOpacity>
      )
    }),
  },

标签： react-native