Question

在编写代码时，不在渲染功能中，按钮不会导航到页面/屏幕。它显示无法找到变量'this.navigation.navigate' OnPress 功能只是发出错误

static navigationOptions = {
    headerTitle: 'Review Jobs',
    headerRight: (
        <Button
            onPress={() => this.navigation.navigate('settings')}
            title="Settings"
            color="#fff"
        />
    ),
}

Answer 1

您使用胖箭头功能并将{navigation} az道具传递给static navigationOptions。

您想要的代码是：

static navigationOptions = ({ navigation }) => {
    headerTitle: "Review Jobs",
    headerRight: (
        <Button
            onPress={() => navigation.navigate("settings")}
            title="Settings"
            color="#FFF"
        />
    ),
}

Answer 2

您需要在参数中传递导航，就像这样。

static navigationOptions = ({navigation}) => {
    headerTitle: 'Review Jobs',
    headerRight: (
        <Button
            onPress={() => navigation.navigate('settings')}
            title="Settings"
            color="#fff"
        />
    ),
}

Answer 3

这样做：

render() {
return (
  <View>
   <Button title="show me settings" onPress={this.GoToSettings} />
  </View>
 );
}


GoToSettings= () => {
  this.props.navigation.navigate('Settings');
 };

编辑1

哦对不起，我想我首先误解了它

你需要通过Fat Arrow funktion传递值（（{navigation}）），否则onPress函数无法使用它

我希望你在寻找什么：

static navigationOptions = ({ navigation}) => ({
  title: "Review Jobs",
  headerRight: <Button title="Settings" onPress={()=>{ 
                 navigation.navigate('settings'); }} />,
  });

在没有渲染功能的情况下运行时，无法使用导航选项导航到设置屏幕

3 个答案:

编辑1