Передача значения местоположения другому компоненту в React native - PullRequest
Новая
       35

Передача значения местоположения другому компоненту в React native

0 голосов
/ 23 сентября 2018

Я пытаюсь отправить значения широты и долготы (извлеченные с помощью 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 Ответ

0 голосов
/ 23 сентября 2018

Это может быть проблемой асинхронного характера this.setState().Попробуйте немного изменить код.Вместо вызова this.props.navigation.navigate() после this.setState(), попробуйте вызвать его в 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,})
});

Надеюсь, это поможет.Дайте мне знать, если это работает.

...