将位置值传递给 React Native 中的另一个组件答案

【问题标题】：Passing location value to another component in React native将位置值传递给 React Native 中的另一个组件
【发布时间】：2018-09-23 14:25:32
【问题描述】：

我正在尝试将纬度和经度值（使用主屏幕中的 navigator.geolocation 获取）发送到详细信息屏幕，但详细信息页面接收的不是实际值，而是空值。这是我的代码：

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {

constructor(props) {
    super(props);
    this.state = {
    latitude: null,
    longitude: null,
    error: null,
    };
}



render() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Button title="Add New Outlet" onPress={() => {
                navigator.geolocation.getCurrentPosition(
                        (position) => {
                                        this.setState({
                                        latitude: position.coords.latitude,
                                        longitude: position.coords.longitude,
                                        error: null,
                                        });
                                    },
                        (error) => this.setState({ error: error.message }),
                        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
                    );

                this.props.navigation.navigate('Details', {latitude: this.state.latitude, longitude: this.state.longitude,});
            }}/>
        </View>
        );
    }


}

class DetailsScreen extends React.Component {

render() {
    const { navigation } = this.props;
    const latitude = navigation.getParam('latitude', 'NO-ID');
    const longitude = navigation.getParam('longitude', 'some default value');
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Details Screen</Text>
          <Text>latitude: {JSON.stringify(latitude)}</Text>
          <Text>longitude: {JSON.stringify(longitude)}</Text>
        </View>
        );
    }
}

const RootStack = createStackNavigator(
{
    Home: HomeScreen,
    Details: DetailsScreen,
},
{
    initialRouteName: 'Home',
}
);

export default class App extends React.Component {
  render() {
return <RootStack />;
  }
}

组件之间的值已成功传递，但当前状态值未传递。请帮助...

【问题讨论】：

标签： react-native geolocation navigator

【解决方案1】：

这可能是this.setState() 的异步性质问题。试着稍微修改一下代码。不要在this.setState() 之后调用this.props.navigation.navigate()，而是尝试在回调中的this.setState() 作为第二个参数调用它。以下是你可以做到的：

this.setState({
    latitude: position.coords.latitude,
    longitude: position.coords.longitude,
    error: null,
}, () => {
    this.props.navigation.navigate('Details', {latitude: this.state.latitude, longitude: this.state.longitude,})
});

我希望这会有所帮助。让我知道它是否有效。

【讨论】：