react-native写h5页面,在使用手机自带的返回,可以在页面设置指定返回的页面
时间: 2024-02-03 20:15:38 浏览: 12
可以使用react-navigation库来实现,在StackNavigator中可以通过navigationOptions来设置页面的返回行为。例如,可以在页面的navigationOptions中设置headerLeft属性为一个自定义的组件,该组件可以包含一个返回按钮,并且在按钮被点击时执行指定的返回行为。示例代码如下:
```
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createStackNavigator, NavigationActions } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Details',
headerLeft: (
<TouchableOpacity onPress={() => {
// 执行返回行为
navigation.dispatch(NavigationActions.navigate({ routeName: 'Home' }));
}}>
<Text>Back</Text>
</TouchableOpacity>
),
};
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
});
export default AppNavigator;
```
在上面的代码中,DetailsScreen页面的headerLeft属性被设置为一个自定义的组件。当该组件被点击时,会执行指定的返回行为,即通过navigation.dispatch方法来触发一个NavigationActions.navigate动作,使得页面返回到HomeScreen页面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![apk](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)