导航到一个屏幕到另一个屏幕答案

【问题标题】：navigate to one screen tp another导航到一个屏幕到另一个屏幕
【发布时间】：2018-08-18 06:40:17
【问题描述】：

我正在这个应用程序中创建反应本机应用程序，我想将一个子视图导航到另一个子视图。在这里，我有已应用用户的列表，其中包含已申请该项目的用户的详细信息。单击该列表项，我将能够查看他/她的个人资料我做了什么：

 onUserClicked() {
    //Fetch Applied User And Show to screen
    console.log(this.props.data.uid);
    NavigationService.navigate('ViewActorProfileScreen', { id: this.props.data.uid });
  }

  render() {
    return (
      <View>
      <TouchableOpacity onPress={this.onUserClicked.bind(this)} >
        <CardSection style={styles.container}>
          <Text>{this.props.data.name}</Text>
            <Text style={styles.titleStyle}>{this.props.data.category}</Text>
            <Text style={styles.labelStyle}>
              Gender - {this.props.data.gender}
            </Text>
          <Text style={styles.labelStyle}>Email - {this.props.data.email}</Text>
          <Text style={styles.labelStyle}>Address - {this.props.data.address}</Text>
          <Text style={styles.labelStyle}>Language : {this.props.data.language}</Text>
          <Text style={styles.labelStyle}>Number - {this.props.data.mobile}</Text>
          <Text style={styles.labelStyle}>{this.props.data.description}</Text>
          <IconButton
            onPress={this.onChatClicked.bind(this)}
            iconname="comment"
            lable="chat"
          />
        </CardSection>
      </TouchableOpacity>
      </View>
    );
  }

导航服务：

    import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

export default { setTopLevelNavigator, navigate };

rootStack.js

    const MainStack = createStackNavigator(
{
  HomeScreen: Home,
  Login: LoginScreen,
  SignUpScreen: UserSignUp,
  ForgotPassword: ForgotPasswordScreen,
  updateProfile: UserProfileScreen,
  viewActorProfile:ViewActorProfileScreen
},
{
   initialRouteName: 'HomeScreen'
}
);

索引.js

    export * from './UpdateActorProfile';
export * from './ViewProject';
export * from './ViewActorProfileScreen';
export * from './AppliedProjectUsers';
export * from './AppliedUserList';

我创建了 viewAcotrProfileScreen 页面，该页面将包含用于查看配置文件的 UI，并且我还将该文件添加到 component/index.js 文件中。但我无法导航到该页面。我是 React Native 的新手，请把我引向这个问题。在此先感谢

【问题讨论】：

你能显示NavigationService的代码和你的根导航吗
@SGhaleb 导航服务没有问题，因为我可以在另一个页面上导航/但在这里我不能。虽然我已经更新了代码。请检查并告诉我
点击onUserClicked()时是否出现错误。这个console.log(this.props.data.uid); 也会出现在控制台上吗？
不显示 uid
这些代码sn-ps似乎没有什么问题。 ViewActorProfileScreen 组件和您定义导航的根页面呢

标签： react-native react-native-navigation

【解决方案1】：

将导航名称更改为...

NavigationService.navigate('viewActorProfile', { id: this.props.data.uid }); }

另外，你的 MainStack 非常不一致，会让你犯下更多类似的错误。

HomeScreen: Home, Login: LoginScreen, SignUpScreen: UserSignUp, ForgotPassword: ForgotPasswordScreen, updateProfile: UserProfileScreen, viewActorProfile:ViewActorProfileScreen

为了更好地组织，请确保一侧以Screen 结尾，不要混淆

【讨论】：