导航到一个屏幕到另一个

Question

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

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

Index.js

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

我已经创建了 viewAcotrProfileScreen 页面，其中将包含 UI 用于查看配置文件，我还将该文件添加到 component/index.js file.but 我无法导航到该页面.我是react native的新手请提前把我拉到problem.Thanks

Answer 1

将导航名称更改为...

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

此外，您的 MainStack 非常不一致，会让您犯下更多类似这样的错误。

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

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

导航到一个屏幕到另一个

navigate to one screen tp another

react-native

react-native-navigation