Передача данных с использованием интерактивной навигации
Я пытаюсь передать данные между экранами в моем приложении. В настоящее время я использую
"react-native": "0.46.0",
"react-navigation": "^1.0.0-beta.11"
У меня есть index.js
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import App from './src/App'
import { StackNavigator } from 'react-navigation';
import SecondScreen from './src/SecondScreen'
class med extends Component {
static navigationOptions = {
title: 'Home Screen',
};
render(){
const { navigation } = this.props;
return (
<App navigation={ navigation }/>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: med },
SecondScreen: { screen: SecondScreen, title: 'ss' },
});
AppRegistry.registerComponent('med', () => SimpleApp);
app as
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Button,
View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
const App = (props) => {
const { navigate } = props.navigation;
return (
<View>
<Text>
Welcome to React Native Navigation Sample!
</Text>
<Button
onPress={() => navigate('SecondScreen', { user: 'Lucy' })}
title="Go to Second Screen"
/>
</View>
);
}
export default App
затем в secondscreen.js, где мы будем извлекать данные, которые были переданы с предыдущего экрана, как
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
const SecondScreen = (props) => {
const { state} = props.navigation;
console.log("PROPS" + state.params);
return (
<View>
<Text>
HI
</Text>
</View>
);
}
SecondScreen.navigationOptions = {
title: 'Second Screen Title',
};
export default SecondScreen
Всякий раз, когда я консоль .log, я получаю неопределенный.
https://reactnavigation.org/docs/navigators/navigation-prop
Документы говорят, что каждый экран должен иметь эти значения, что я делаю не так?
Ответы
Ответ 1
В вашем коде, props.navigation и this.props.navigation.state две разные вещи. Вы должны попробовать это на своем втором экране:
const {state} = props.navigation;
console.log("PROPS " + state.params.user);
строка const {state}
доступна только для получения легко читаемого кода.
Ответ 2
Первый класс
<Button onPress = {
() => navigate("ScreenName", {name:'Jane'})
} />
Второй класс
const {params} = this.props.navigation.state
Ответ 3
реактивная навигация 3. *
Родительский класс
this.props.navigation.navigate('Child', {
something: 'Some Value',
});
Детский класс
this.props.navigation.state.params.something // outputs "Some Value"
Ответ 4
Вы можете получить доступ к вашему параметру user
, с props.navigation.state.params.user
в соответствующем компоненте (SecondScreen).
Ответ 5
От реагировать navigaton 3.x документы, вы можете использовать getParam(params)
.
class SecondScreen extends React.Component {
render() {
const { navigation } = this.props;
const fname = navigation.getParam('user');
return (
<View>
<Text>user: {JSON.stringify(fname)}</Text>
</View>
);
}
}
Ответ 6
Я разработал пакет NPM для отправки данных из одного компонента в другие компоненты. Пожалуйста, проверьте и используйте его легко использовать.
Реагировать на данные навигации
import { DataNavigation } from 'react-data-navigation';
.
.
.
// For set the data you need to call setData(key, value) Function i.e.
// eg. DataNavigation.setData('name', 'Viren');
// it will set the 'Viren' as respect to 'name' key.
import { DataNavigation } from 'react-data-navigation';
.
.
.
// Here we want to get the name value, which you set in home component than
// console.log('Hey my name is' + DataNavigation.getData('name'));
// it will print in console : Hey my name is Viren.
Комментарий вниз за любую помощь.