Question

我有LoginPage和UserPage。

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

我需要在UserPage中输入时获取用户数据。

所以我在UserPage上的componentWillMount func上调度fetchUserData动作。

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

众所周知，登录前我们永远不会在导航状态下拥有“params.userId”。

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

我收到了未定义的错误。

所以我在UserPage中做了类似的事情

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

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

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

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

我听说在启动应用程序之前对本机检查进行了编码，

这真的发生了吗？

问题已更新

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

//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上的代码会运行。

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

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
    }
);

反应原生运行组件代码而不呈现

问题已更新

1 个答案: