Как передать значения другому компоненту в React-Native-Router-Flux?
Мой код:
...
<Router>
<Scene key="com1" component={Com1} initial/>
<Scene key="com2" component={Com2}/>
</Router>
...
com1.js
...
onPress={Actions.com2}
Я изменил com1
на com2
.
Но мне нужно передать значения для поля ввода com1
в com2
.
Как я могу это сделать?
Ответы
Ответ 1
Вы можете передавать данные следующим образом:
Actions.com2 ({текст: 'Hello World'})
Вы можете восстановить свои данные в com2 следующим образом:
this.props.text
Дополнительную информацию можно найти в следующем учебнике:
https://github.com/aksonov/react-native-router-flux/blob/master/docs/v3/MINI_TUTORIAL.md
Ответ 2
В дополнение к этому (и для тех, кто в комментариях сказал, что он не работает), вы можете попробовать ниже. Когда вы передаете
Actions.com2({text : 'Hello World'});
Com2 должен передать "реквизит"
const Com2 = (props) => {
return ( <View ...
{props.text}
... />
);
Ответ 3
Передача данных через вход,
import React, { Component } from 'react';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class Com1 extends Component {
state = { text: '' };
render() {
return (
<View>
<TextInput
value={this.state.text}
onChangeText={text => this.setState({ text })}
/>
<TouchableOpacity onPress={this.onPressNext.bind(this)}>
<Text>Get Data</Text>
</TouchableOpacity>
</View>
);
}
onPressNext() {
Actions.Com2({text: this.state.text });
}
}
Чтобы получить значение на второй странице
export default class Com2 extends Component {
render() {
return (
<View>
<Text>
{this.props.text}
</Text>
</View>
);
}
}
Вы можете сослаться на эту ссылку: https://react-native-solutions.blogspot.com/2018/07/passing-data-between-screens-in-react.html