未定义不是对象 this.props.navigation - react-native

IT技术 reactjs react-native
2021-05-12 12:08:51

我有这个问题，不知道它是否与导航器选项或渲染视图有关，有人可以看看我的代码并提供一些见解。

APPNavigator.js

export default createSwitchNavigator({
    Main: MainTabNavigator,
    Custom: CustomNavigator,
},{
    initialRouteName: 'Main' 
}
);

自定义导航器.js

const BrowserStack = createStackNavigator({ Select: Search, Browser: Browser });

export default createStackNavigator({
BrowserStack
},{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
}
);

MainTabNavigator.js

const DashStack = createStackNavigator({
  Home: Dashboard,
});

const SearchStack = createStackNavigator({
  Select: Search,
});

const FavoritesStack = createStackNavigator({
  Auth: Favorites,
});

export default createBottomTabNavigator({
  DashStack,
  SearchStack,
  FavoritesStack,
});

我在搜索屏幕上运行 API 调用并在 flatList 上呈现项目，如下所示：

 <FlatList
  data={this.props.results}
  renderItem={({ item, index }) => (

    <RkCard rkType='story'>
      <RkButton rkType='small outline' onPress={this.test}>View</RkButton>
    </RkCard>

  )}/>

我的代码在此test功能中中断，我不知道为什么我无法导航到该屏幕。我还需要发送item.href到稍后访问它。

test() {
    this.props.navigation.navigate('Browser',{ source: item.href })
}

任何形式的帮助表示赞赏。谢谢

2个回答

为了访问类props，您需要将函数绑定到它。

最简单的方法是使用箭头函数作为

test = () => {
  this.props.navigation.navigate('Browser',{ source: item.href })
}

如果屏幕未在导航堆栈中注册，则您需要添加一个HOC withNavigator，这将允许访问导航props。

如果您<FlatList>在其他组件中显示，您应该设置导航props。

像这样：

<YourComponent
   results = {...}
   navigation = {this.props.navigation}    //  <-- add this line
>

在 YourComponent 中：

<FlatList
  data={this.props.results}
  renderItem={({ item, index }) => (

    <RkCard rkType='story'>
      <RkButton rkType='small outline' onPress={()=> this.props.navigation.navigate('Browser')}>View</RkButton>
    </RkCard>

  )}/>
其它你可能感兴趣的问题
上一篇REACT：我们如何将外部库用作脚本、类或功能组件？是否可以？ 下一篇有没有办法知道渲染函数是因为父修改（props）还是因为内部状态发生了变化而被调用？