Question

我有用户列表，每个用户在列表中都有自己的显示图像。

我正在尝试的是每当用户按下显示图像时，通过stackNavigation重定向到他/她的个人资料。

CustomTabView：

const goToProfile = StackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`
    })
  },
})

StackNavigator： // goToProfile.js //也尝试放入index.anndroid.js但未找到导出方式

const CustomTabRouter = TabRouter(
  {
    Chat: {
      screen: Chats,
      path: ""
    },
    Status: {
      screen: Contacts,
      path: "notifications"
    },
    Camera: {
      screen: Camera,
      path: "settings"
    }
  },
  {
    initialRouteName: "Chat",
  },


     );

    const CustomTabs = createNavigationContainer(
     createNavigator(CustomTabRouter)(CustomTabView)
    );

自定义标签： //index.android.js

          <TouchableOpacity
            onPress = { () =>  this.props.navigation.navigate('Profile', { item } ) }  >
              <Avatar
                source={{ uri: item.picture.thumbnail }}
              />
          </TouchableOpacity>

也是我的组成部分：

 app.directive("myDirective", ['$http', function($http) {
        return {
            restrict: 'AE',
            controller: "myDirectiveController",
            templateUrl: 'templates/my-directive.html'
        }
    }]);

Answer 1

您的Stack Navigator将如下所示：

    const ChatStack= StackNavigator({
      Chat:{screen: Chat,
      navigationOptions: {
       header: null,
     }},
     Profile: {
        screen: Profile,
        navigationOptions: ({ navigation }) => ({
          title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`,
          tabBarVisible: false
         // depending if you want to hide the tabBar on the profile page if not remove it.
        })
      },
    })

然后您的customTab将采用以下形状：

const CustomTabRouter = TabRouter(
  {
    Chat: {
      screen: ChatStack,
    },
    Status: {
      screen: Contacts,
      path: "notifications"
    },
    Camera: {
      screen: Camera,
      path: "settings"
    }
  },
.........

通过这些更改，您应该可以使用

导航到“个人资料”屏幕

this.props.navigation.navigate('Profile', { item } )

Answer 2

你想发送一个导航动作，而不是渲染一个新的堆栈 - 虽然我不确定你的导航器是否正确构建，但是这样才能成功...

_goToProfile = (person) => {
  <goToProfile navigate={this.props.navigation} />
}

应该是

_goToProfile = (person) => {
  this.props.navigation.navigate('Profile', person)
}

使用自定义标签与StackNavigator？

2 个答案: