使用自定义选项卡和StackNavigator?
我有用户列表,每个用户都有其列表中的显示图像。使用自定义选项卡和StackNavigator?
我想要的是每当用户按下显示图像,通过stackNavigation重定向到他/她的个人资料。
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>
);
};
StackNavigator: // // goToProfile.js也尝试将在index.anndroid.js但没有找到一种方法来导出
const goToProfile = StackNavigator({
Profile: {
screen: Profile,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`
})
},
})
定制标签: //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)
);
也是我的组件:
<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.
})
},
})
然后你customTab将采取这种形状:
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} />
}
应该
_goToProfile = (person) => {
this.props.navigation.navigate('Profile', person)
}
已经尝试过......屏幕配置文件没有在*组件中定义,所以它不起作用 –
正确,您的示例代码没有包含足够的信息来提供完整的答案。 会很方便地看到你所有的导航。 如果您将'screen:Profile'更改为'screen:CustomTabs',那么它是否有效? – gtfargo
nope,不工作... CustomTabs不被视为屏幕:( –
问题是什么? – Cruiser
@Cruiser如何在我的聊天屏幕中使用stacknavigator来实现 –
SO不是代码写入服务。我建议你做一个尝试,并提出一个问题,当你卡住,出现错误,或以其他方式遇到问题 – Cruiser