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

Posted 2023-02-23

【中文标题】将位置值传递给 React Native 中的另一个组件

【英文标题】：Passing location value to another component in 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 />;
  

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

【参考方案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,)
);

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