Reactjs 在StackNavigator中使用自定义选项卡？

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

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

自定义选项卡视图：

    const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;

  const ActiveScreen = router.getComponentForState(navigation.state);

  const routeNav = addNavigationHelpers({
    ...navigation,
    state: routes[index],
  });
  const routeOptions = router.getScreenOptions(routeNav, 'tabBar');
  return (
    <View style={styles.container}>
      <CustomTabBar
        navigation={navigation}
        activeRouteName={routes[index].routeName}
        icon={routeOptions.tabBarIcon}
      />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index]
        })}
      />
    </View>
  );
}; 

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

    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.
        })
      },
    }) 

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

自定义选项卡：//index.android.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)
    );

还有我的组件：

    const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;

  const ActiveScreen = router.getComponentForState(navigation.state);

  const routeNav = addNavigationHelpers({
    ...navigation,
    state: routes[index],
  });
  const routeOptions = router.getScreenOptions(routeNav, 'tabBar');
  return (
    <View style={styles.container}>
      <CustomTabBar
        navigation={navigation}
        activeRouteName={routes[index].routeName}
        icon={routeOptions.tabBarIcon}
      />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index]
        })}
      />
    </View>
  );
}; 

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

    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.
        })
      },
    }) 

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

this.props.navigation.navigate（'Profile'，{item}）}>

您希望分派一个导航操作，而不是呈现一个新堆栈-尽管我不确定您的导航器是否正确构造以使其成功

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

---

堆栈导航器将如下所示：

    const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;

  const ActiveScreen = router.getComponentForState(navigation.state);

  const routeNav = addNavigationHelpers({
    ...navigation,
    state: routes[index],
  });
  const routeOptions = router.getScreenOptions(routeNav, 'tabBar');
  return (
    <View style={styles.container}>
      <CustomTabBar
        navigation={navigation}
        activeRouteName={routes[index].routeName}
        icon={routeOptions.tabBarIcon}
      />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index]
        })}
      />
    </View>
  );
}; 

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

    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.
        })
      },
    }) 

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

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

    const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;

  const ActiveScreen = router.getComponentForState(navigation.state);

  const routeNav = addNavigationHelpers({
    ...navigation,
    state: routes[index],
  });
  const routeOptions = router.getScreenOptions(routeNav, 'tabBar');
  return (
    <View style={styles.container}>
      <CustomTabBar
        navigation={navigation}
        activeRouteName={routes[index].routeName}
        icon={routeOptions.tabBarIcon}
      />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index]
        })}
      />
    </View>
  );
}; 

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

    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.
        })
      },
    }) 

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

通过这些更改，您应该能够使用

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

---

问题是什么？@Cruiser我如何在聊天屏幕中使用stacknavigator来实现这一点，所以它不是一个代码编写服务。我建议你尝试一下，当你陷入困境、出错或遇到其他问题时，问一个问题problems@Cruiser哈哈，我知道，我试过不同的方法，都没用out@Cruiser我已经尝试使用stacknavigator const将其作为

chats{screen:goToProfile}

已经尝试过了。。。屏幕配置文件未在顶级组件中定义，因此无法正常工作，您的示例代码没有包含足够的信息，无法提供完整答案。可以方便地看到你所有的导航员。如果将

screen:Profile，

更改为

screen:CustomTabs

是否有效？不有效…CustomTabs不被视为屏幕：(