使用带有 Stack Navigator 的 React Native Navigation 将数据从屏幕传递到其他屏幕

Question

你好，我是新手，我是 react-native 的初学者，我尝试制作一个 textInput，我想在另一个屏幕上传递数据（用户输入的文本）我该怎么做你能帮忙我 ？我正在使用反应导航 StackNavigator

这里是我的一些代码，我的第一堂课用 textinput

export default class ParamScreen extends React.Component {

static navigationOptions = {
    title: ' Covoit Ulg ',
    headerStyle:{ backgroundColor: '#66CDAA'},
    headerTitleStyle:{ color: '#FFF', alignSelf: 'center'},
    titleStyle: {alignSelf: 'center'}
  };



render () {
    const { navigate } = this.props.navigation;

    return (
        <View>
            <InputControl/>
            <Button onPress = {() => navigate('ParamPass',{TextInput: ''})}
                      kind = 'rounded'
                      type = 'danger'
                      style={btnStyle}
                      marginBottom= '10'>pass data ?</Button>
        </View>    
    )
}
}


class InputControl extends React.Component {
constructor(props) {
    super(props)
    this.handleTextInput = this.handleTextInput.bind(this)
    this.state = {textIn: false}
}

handleTextInput() {
    this.setState({textIn: true})
}
render () {
    const textIn = this.state.textIn

    let TextInput = null
    if (textIn) {
        TextInput = <UserInput onSelectionChange={this.handleTextInput}/>
    } 
    return (
        <View>
            <UserInput textIn={textIn}/>
            {TextInput}
        </View>    
    )
}
}
function UserInput(props) {
return <TextInput onSelectionChange={props.onSelectionChange}>
            Test data test data
          </TextInput>  

}

这就是我想要我的数据的地方

export default class ParamsData extends React.Component {


render (){

    const {state} = this.props.navigation;
    console.log("test test" ,this.props.navigation)
    var textIn = state.params ? state.params.textIn : "<undefined>";

    return (
      <View>
          <Text>Second View: {textIn}</Text>
      </View>
    )
   }
}

感谢您的帮助，对不起，我的英语不是最好的，但我正在努力 ^^（最好说然后写）``

export default class ParamScreen extends React.Component {

constructor(props) {
    super(props)
    this.state = { text: 'Test test'}
}

    static navigationOptions = {
        title: ' Covoit Ulg ',
        headerStyle:{ backgroundColor: '#66CDAA'},
        headerTitleStyle:{ color: '#FFF', alignSelf: 'center'},
        titleStyle: {alignSelf: 'center'}
      };

   onSubmit = () => {
       //whatever you want to do on submit
       this.props.navigation.navigate('Parampass', {text: this.state.text})
   }

    render () {
        const { navigate } = this.props.navigation;

        return (
            <View>
                <TextInput style={style.input} 
                            underlineColorAndroid= 'transparent'
                            onChangeText= { (text) => this.setState( {text})}
                            value= {this.state.text}
                            />
                <Button onPress = {() =>this.onSubmit()}
                          kind = 'rounded'
                          type = 'danger'
                          style={btnStyle}
                          marginBottom= '10'>pass data ?</Button>
            </View>    
        )
    }
}

我在第一个屏幕上这样尝试

export default class ParamsData extends React.Component {

static navigationOptions = ({navigation}) => {
    return {
        title: 'Test /  ${navigation.state.params.text}'
    }
}
constructor (props) {
    super(props)
    this.state = {
        text: this.props.navigation.state.params.text,
        report: null
    }
}

render (){



    return (
      <View>

          <Text>Second View: {text}</Text>
      </View>
    )
}

}

这就是我接收数据的方式，请帮助我，我觉得我很接近了

Answer 1

嗨，朋友们，我的英语也不是最好的，此时这段代码正在运行

第一个屏幕显示，如何通过导航发送参数，在这种情况下我使用 NavigationActions.reset，因为我重置了路线（避免按钮返回），但在你的情况下

_navigateToHome = (context, data) => {
        context.navigation.dispatch(NavigationActions.reset(
            {
                index: 0,
                actions: [
                    NavigationActions.navigate({ routeName: 'Home', params: { param: data }, })
                ]
            }));
    }

你应该看到 param: data ，这是传递参数的地方

//Home.js

你应该这样获取数据：

componentDidMount() {
   console.warn(this.props.navigation.state.params.param)
}