Question

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

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

NavigationService：

    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文件中。但是我无法导航至该页面。我是React Native的新手，请告诉我这个问题。谢谢！

Answer 1

将导航名称更改为...

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

此外，您的MainStack非常不一致，会使您进一步犯下这样的错误。

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

为了获得更好的组织效果，请确保一侧不以Screen结尾

导航到一个屏幕，然后另一屏幕

1 个答案: