最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【基本解决】react-navigation用TabNavigator出错:undefined is not an object evaluating params.user

React Native crifan 3794浏览 0评论

折腾:

【已解决】ReactNative中实现底部Tab页面和顶部导航栏

期间,把代码参考官网去换为TabNavigator,结果之前StackNavigator正常的代码:

  render() {
    const { navigate } = this.props.navigation;
    // The screen’s current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    
    return (
      <View style={styles.container}>
        <Text>当前用户:{params.user}</Text>
        <Button
          onPress={() => navigate(‘Home’)}
          title="跳回Home页"
        />
      </View>
    );
  }

就出错了:

19:57:11: undefined is not an object (evaluating ‘params.user’)
* Profile.js:36:27 in render
– node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:1863:19 in <unknown>
– node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:1610:15 in measureLifeCyclePerf
– … 113 more stack frames from framework internals

很明显是:

StackNavigator中传递参数的代码,在TabNavigator时出错了。

要去搞清楚,如何在TabNavigator中,传递参数。

react-navigation tabnavigator undefined is not an object evaluating params.user

undefined is not an object problem · Issue #1569 · react-community/react-navigation

undefined is not an object (evaluating ‘state.index’) (redux) · Issue #261 · react-community/react-navigation

undefined is not an object (evaluating ‘state.routes[state.index]’) · Issue #1357 · react-community/react-navigation

cannot read property routes of undefined – navigation state seems to be getting lost · Issue #485 · react-community/react-navigation

Undefined is not an object (evaluating navigation.state.routes) TabNavigator + redux · Issue #857 · react-community/react-navigation

Params not being passed when navigating between Stacks (repro included) · Issue #143 · react-community/react-navigation

javascript – React Native – navigation issue "undefined is not an object (this.props.navigation.navigate)" – Stack Overflow

React-Navigation: Dynamic Title in TabNavigator. Undefined in not an object – Stack Overflow

tabnavigator undefined is not an object evaluating params.user

react-navigation tabnavigator params

Initial route params not passed to tab navigator · Issue #1647 · react-community/react-navigation

how to set header for TabNavigator? · Issue #741 · react-community/react-navigation

Pass properties to screen in TabNavigator · Issue #760 · react-community/react-navigation

How to pass params from Component Parent to TabNavigator · Issue #2303 · react-community/react-navigation

说是用:screenProps

TabNavigator | React Navigation

不完全是我要的效果:

我想要的是:

另外的页面,跳转到tab页时,传递过来的参数。

算了,暂时去改为:

static navigationOptions = ({ navigation }) => ({
        title: `个人中心:${navigation.state.params ? navigation.state.params.user : ""}`,
        <Text>当前用户:{params && params.user ? "无" : params.user}</Text>

然后可以正常运行了:

然后点击 个人中心的tab后,切换过去,则是没有传递参数的:

但是发现个问题,在点击主页按钮切换到个人中心后,个人中心显示出名字后,再从tab点击过去,则也还是显示出对应的名字,和上图一样,而不是现实 无 了

但是暂时也不去深究这个tab的navigator如何传递参数了。

【总结】

此处只是属于间接规避问题了,但是没有彻底解决问题:

代码改为:

static navigationOptions = ({ navigation }) => ({
        title: `个人中心:${navigation.state.params ? navigation.state.params.user : ""}`,
        <Text>当前用户:{params && params.user ? "无" : params.user}</Text>

使得页面可以基本上能够传递参数,页面能否正常显示,且点击按钮后,可以传递名字参数了。

但是会有个问题:

之前从button点击切换,传递了的参数到profile页的name,再去点击tab后,参数竟然保留了。

所以逻辑上不对。

以后有空再去深究。

转载请注明:在路上 » 【基本解决】react-navigation用TabNavigator出错:undefined is not an object evaluating params.user

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.164 seconds, using 22.08MB memory