Question

我是React Native的新手。我认为这个问题可能很简单，但我所遵循的所有教程都会导致错误。

我有基本的List Item，它包含一个onPress函数，用于设置要传递给新屏幕的道具，如下所示：

<ListItem
  roundAvatar
  title={`${item.name} ${item.name}`}
  subtitle={item.name}

  containerStyle={{ borderBottomWidth: 0 }}
  onPress={() => this.onPress()}
/>

我的onPress功能如下所示：

onPress(){
    this.props.navigator.push({name:'Details', user: 'test'});
}

以下是我的路线：

const RootStack = StackNavigator( 
{
Home: {
  screen: HomeScreen,
},
Details: {
  screen: DetailsScreen,
},
},
{
  initialRouteName: 'Home',
}
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

我收到错误undefined is not an object (evaluating 'this.props.navigator.push）。我该如何解决？它没有多大意义。提前致谢。（在Android设备上测试）

Answer 1

你也可以通过这样的导航发送道具

声明

Class Example{

render(){
    const { navigate } = this.props.navigation;
return(
     <ListItem
      roundAvatar
      title={`${item.name} ${item.name}`}
      subtitle={item.name}

      containerStyle={{ borderBottomWidth: 0 }}
      onPress={ navigate('screenName',{ name: 'Details',user: 'Test',})}
    />
 )
}}

Answer 2

这是因为你声明onPress方法的方式。

常规函数有自己的这个范围，因此当你调用this.props时，它会在函数范围内搜索，而不是在父类中搜索。

解决方案1：使用箭头功能（推荐）
将您的函数声明为箭头函数，因为它们没有他们自己的此范围。因此，他们将使用其父类的这个范围。

onPress=()=>{
    this.props.navigator.push({name:'Details', user: 'test'});
}

解决方案2：使用bind this

Class ExampleComponent{
onPress(){
//this is not defined
}

render(){
return(
         <ListItem
          roundAvatar
          title={`${item.name} ${item.name}`}
          subtitle={item.name}

          containerStyle={{ borderBottomWidth: 0 }}
          onPress={this.onPress.bind(this)}
        />
     )
  }
}

在导航中传递道具时出错 - React Native

2 个答案: