未定义不是对象 this.props.navigation - 反应原生 [英] Undefined is not an object this.props.navigation - react native

问题描述

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

I have this issue, don't know if the it's related to navigator options or in render views, can someone please take a look at my code and give some insights.

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 上呈现项目，如下所示:

I run an API call on Search screen and render items on a flatList like so:

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

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

  )}/>

我的代码在这个 test 函数中中断了，我不知道为什么我无法导航到那个屏幕.我还需要发送 item.href 以便稍后访问.

My code breaks in this test function, I don't know why I cannot navigate to that screen. I also need to send item.href to access later on it.

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

感谢任何形式的帮助.谢谢

Any kind of help is appreciated. Thanks

推荐答案

为了访问 class props，你需要将函数绑定到它.

In order to access class props you need to bind the function to it.

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

The simplest way would be to use arrow function as

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

如果屏幕未在导航堆栈中注册，那么您需要添加一个HOC withNavigator，这将允许访问导航道具.

If the screen is not registered in the navigation stack, then you need to add a HOC withNavigator, which will give access to the navigation props.

这篇关于未定义不是对象 this.props.navigation - 反应原生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！