时间戳

首页 > 解决方案 > 未定义不是对象 this.props.navigation - 反应原生

reactjs - 未定义不是对象 this.props.navigation - 反应原生

问题描述

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

APPNavigator.js

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

CustomNavigator.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 })
}

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

标签： reactjsreact-native

解决方案

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

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

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

如果屏幕没有在导航堆栈中注册，那么您需要添加一个HOC withNavigator，它可以访问导航道具。

推荐阅读