如何将值传递给 React-Native-Router-Flux 中的其他组件？

Question

我的代码是：

...
<Router>
 <Scene key="com1" component={Com1} initial/>
<Scene key="com2" component={Com2}/>
</Router>
...
com1.js
...
onPress={Actions.com2}

我把com1改成了com2。

但我需要将 Com1 的输入框的值传递给 Com2。

我该怎么做？

Answer 1

你可以像这样传递数据：

Actions.com2 ({text: 'Hello World'})

您可以像这样恢复 com2 中的数据：

this.props.text

您可以前往下一教程了解更多信息：

https://github.com/aksonov/react-native-router-flux/blob/master/docs/v3/MINI_TUTORIAL.md

Answer 2

除此之外，（对于那些在评论中说它不起作用的人）您可能想尝试下面的方法。当你通过

Actions.com2({text : 'Hello World'});

Com2 应该通过 'props'

const Com2 = (props) => {
   return ( <View ...
    {props.text}
   ... />
);

Answer 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>
    );
  }
 }

你可以参考这个link： https://react-native-solutions.blogspot.com/2018/07/passing-data-between-screens-in-react.html

Answer 4

使用推送方式如下：

Actions.push('your key name',{prop you want to pass})

它将场景推入堆栈，执行到新场景的转换。

Answer 5

你可以使用带有道具的动作

onPress={() => Actions.com2({title: 'some title'})}

然后在 com2 中，您可以像那样检索数据

this.props.title

或者您可以使用推送属性

 Actions.push('com2',{title: 'some title' } );

然后在 com2 中也像这样检索它

this.props.title

如何将值传递给 React-Native-Router-Flux 中的其他组件？

How to pass values to other component in React-Native-Router-Flux?

react-native

react-native-router-flux