React Native中React Stack Navigator导航props报错：undefined is not an object

你遇到的核心问题是函数上下文丢失：当点击按钮触发addCommand时，this并没有指向你的CommandsList组件实例，自然就找不到this.props.navigation了。下面给你几个简单有效的解决办法，还有额外的检查要点：

方案1：在构造函数中手动绑定this #

修改构造函数，把addCommand的this绑定到组件实例上，确保函数执行时能正确访问组件的props：

class CommandsList extends React.Component {
 constructor(props){ 
   super(props);
   // 关键：绑定this到组件实例
   this.addCommand = this.addCommand.bind(this);
 }
 addCommand(){ 
   this.props.navigation.navigate("CreateCommand"); 
 }
 // 其余代码不变
}

方案2：用箭头函数定义addCommand #

箭头函数会自动继承外层上下文的this，省去手动绑定的步骤，代码更简洁：

class CommandsList extends React.Component {
 constructor(props){ super(props); }
 // 改用箭头函数定义方法
 addCommand = () => { 
   this.props.navigation.navigate("CreateCommand"); 
 }
 render() {
 // 其余代码不变
 }
}

方案3：在onPress中用箭头函数包裹调用 #

如果不想修改函数定义，也可以直接在按钮的onPress属性里用箭头函数包裹调用：

<Button title="Ajouter" onPress={() => this.addCommand()}></Button>

额外检查项 #

如果上面的方法都试过还是报错，要确认你的CommandsList组件是否已经正确注册为Stack Navigator的屏幕组件，比如：

const Stack = createStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator>
      <!-- 必须把组件作为Stack.Screen的component传入 -->
      <Stack.Screen name="CommandsList" component={CommandsList} />
      <Stack.Screen name="CreateCommand" component={CreateCommand} />
    </Stack.Navigator>
  );
}

只有当组件通过Stack.Screen注册后，navigation props才会自动注入到组件中。

内容的提问来源于stack exchange，提问作者Q. Eude