react native 在未呈现时运行组件代码

Question

我有登录页面和用户页面。

当我使用 LoginPage 启动应用程序时，UserPage 运行s 上的代码也是如此。

我需要在用户页面输入时获取用户数据。

所以我在 UserPage 上的 componentWillMount 函数上调度 fetchUserData 操作。

componentWillMount(){
  let props = this.props;
  props.fetchUserData(props.navigation.state.params.userId);
}

众所周知，在登录之前我们永远不会"params.userId"处于导航状态。

但是当我启动应用程序时，UserPage 运行s 上的代码没有任何 userId。

我遇到了未定义的错误。

所以我在 UserPage

中做了类似的事情

componentWillMount(){
  let props = this.props;
  if(props.navigation.state.params)
    props.fetchUserData(props.navigation.state.params.userId);
}

但我不明白为什么要这样做

通常情况下，如果您不导航到该页面，

页面上的代码不应该运行。

听说react native check code before starting an app,

这真的是因为那个吗？

问题已更新

好的，我会添加更多详细信息。首先，这是我的导航器配置

//this is my auth navigator which contains login and sign up page
export default AuthNavigator = StackNavigator({
  Login: {screen: LoginPage},
  SignUp: {screen: ModalSignUp}
},{mode: "modal"});


//this is tab navigator configuration which will be shown after log in
const generalStacks = {
  UserPage: {screen: UserPage}
};

const FeedStacks = StackNavigator({
  FeedPage:{screen:FeedPage}, ...generalStacks
});

const MyPageStacks = StackNavigator({
  ...generalStacks
});

const Tabs = TabNavigator({
  FeedTab : {
    screen: FeedStacks
  },
  MyPageTab : {
    screen: MyPageStacks,
    }
  }
});

const modals = {
  ModalUserProfile: { screen: ModalManageUserProfile },
};

export default RootNavigator = StackNavigator({
  Tabs: {screen: Tabs},
  ...modals
},{mode: "modal"});



// and I wrap AuthNavigator, RootNavigator in AppNavigator
const AppNavigator = StackNavigator({
  AuthNavigator: {screen: AuthNavigator},
  RootNavigator: {screen: RootNavigator}
});

实际上，我是在登录后遇到这个问题的。

当我进入 RootNavigator 中的 FeedTab 时。

FeedStacks 包含 FeedPage 和 UserPage。

所以问题是当我进入 FeedPage 时 UserPage 运行s 上的代码。

这就是我呈现用户页面的方式

class UserPage extends Component{
  componentWillMount(){
    let props = this.props;

    if(props.navigation.state.params){
      props.fetchUserBooks(props.navigation.state.params.id);
    }
  }

  render(){
    let props = this.props;
    let userId, userPage;

    if(props.navigation.state.params && props.userPages[props.navigation.state.params.id]){
      userId = props.navigation.state.params.id;
      userPage = props.userPages[userId];

      return (
        <View>
          <UserData user={userPage.user}/>
        </View>
      )
    }else{
      return <View><Text>isFetching</Text></View>;
    }
  }
}

const mapStateToUserPageProps = (state) => {
  return {
    userPages : state.userPages
  }
};

const mapDispatchToUserPageProps = (dispatch) => {
  return {
    fetchUserBooks: (userId) => {dispatch(fetchUserData(userId));}
  }
};

export default connect(mapStateToUserPageProps, mapDispatchToUserPageProps)(UserPage);

Answer 1

默认情况下，TabNavigator 同时加载其所有子组件。

目前，有一个选项 lazy 可以告诉您是在需要时渲染每个组件，还是预先渲染每个组件。将 lazy 设置为 true 时，您可以在滑动时看到组件渲染。它在 docs.

我建议你试试：

const Tabs = TabNavigator(
    {
      FeedTab : {
        screen: FeedStacks
      },
      MyPageTab : {
        screen: MyPageStacks,
        }
      }
    },
    {
        lazy: true
    }
);

react native 在未呈现时运行组件代码

react native runs component code while it's not rendered

react-native

react-navigation

问题已更新