在react原生应用程序中使用Hooks将数据传递到不同页面的最佳方式

Question

我有一个简单的RN应用程序，可以获取我的当前位置：

import Geolocation from '@react-native-community/geolocation';

使用useEffect，我启动了一个名为requestLocationPermission的方法来检查Permissions，然后获取我的当前位置。

useEffect(() => {
// console.log('is this working');
requestLocationPermission();
}, []);

async function requestLocationPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: 'Location Permission',
message: 'This app needs access to your location',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('You can use the location');
Geolocation.getCurrentPosition(
position => {
//  useCoordinates = position;
console.log('hey man', position);
},
error => {
// See error code charts below.
console.log(error.code, error.message);
},
{enableHighAccuracy: false, timeout: 15000, maximumAge: 10000},
);
} else {
console.log('Location permission denied', granted);
}
} catch (err) {
console.warn(err);
}
}

我想使用useState来存储位置，这样当我导航到包含MapView的页面时，当前位置/标记就会使用正确的坐标进行更新。

目前，包含地图的页面：

const About: () => React$Node = () => {
return (
<>
<View style={styles.body}>
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: 47.48934444614,
longitude: 227.004444388,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
showsCompass={true}>
<Marker
title={"house"}
coordinate={{latitude: 47.48934444614, longitude: 227.004444388}}
/>
</MapView>
</View>
</>
);
};
export default About

有没有办法只用钩子就可以做到这一点？还是我需要使用Redux？

Answer 1

您可以使用上下文API。

创建上下文

const LocationContext = React.createContext({latitude: 0.0, longitude: 0.0});

用提供者-包装您的父组件

<LocationContext.Provider value={/* value from geo location */}>
{/* child view */}
</LocationContext.Provider>

子视图可以使用消费者来获取值

<LocationContext.Consumer>
{({latitude, longitude}) => (
<View> ... </View>
)}
</LocationContext.Consumer>