gpt4 book ai didi

react-native - react 导航,返回嵌套导航

转载 作者:行者123 更新时间:2023-12-04 04:13:13 30 4
gpt4 key购买 nike

Stack Navigator :
- Login
- Register
- Activation
- Tab Navigator
+ Home
+ Histories
+ Cart
+ Profile
- Outlet
- Product

我在返回导航时遇到问题,当我在产品屏幕中时,我可以使用 navigation.navigate('Cart'); 转到“购物车屏幕”,但是在“购物车屏幕”和 goBack() 中,我的屏幕转到“主屏幕”。
如何管理 goBack() 从堆栈屏幕到标签屏幕?

最佳答案

在 react-navigation(在 5 之前)中,我确实实现了您所说的使用自定义导航组件将上导航作为 Prop 向下传递,如下所示:



// this component's navigation is replaced by upper navigation, you can send another prop if you need both navigations.
const MyComponent0 = createStackNavigator(
{
Child1: {
screen: Child1,
navigationOptions: ({navigation}) => {
return {
headerRight: (
// you can use BackButton of library with import it, I wrote my own, that time i didn't know there is a ready importable back button.
<TouchableOpacity
style={{paddingLeft: 10}}
onPress={() => navigation.toggleDrawer()}>
<Icon ios="ios-menu" android="md-menu" style={{color: '#fff'}} />
</TouchableOpacity>
),
headerTitle: <Text style={styles.whiteText}>Child1 title</Text>,
headerLeft: (
<HeaderBackButton
style={{color: '#FFF'}}
onPress={() => navigation.goBack(null)}
/>
),
};
},
},
Child2,
...
},
{
defaultNavigationOptions: {
headerTitleStyle: {
color: '#fff',
fontSize: 13,
...Platform.select({
android: {
fontFamily: ...,
},
ios: {
fontFamily: ...,
},
}),
},
headerStyle: {
backgroundColor: 'rgba(0,0,0,1)',
},
headerTintColor: 'white',
},
},
);


class MyComponent1 extends Component {
constructor() {
super();
}
static router = MyComponent0.router;

render() {
return <MyComponent0 navigation={this.props.navigation} />; // you can send like navigation1 if you need downward navigation too.
}
}


这段代码是旧方法,但它在 5 之前使用 react-navigation 工作。
我希望这可以帮助你。

关于react-native - react 导航,返回嵌套导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61304331/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com