使用使用Stack Navigator的React本机导航将数据从屏幕传递到其他屏幕

Question

你好，我是这里的新手，也是textInput的初学者，我试着做了一个，我想把数据(用户输入的文本)传递到另一个屏幕上，你能帮我做什么？我使用的是react导航StackNavigator

这里是我的一些代码，这是我的第一个带有文本输入的类

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

嗨，朋友们，我的英语也不是最好的，这段代码在这一刻起作用了

第一个sreen展示了如何发送带有导航的参数，在本例中我使用NavigationActions.reset，因为我重置路由(避免按钮返回)，但在您的情况下

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

您应该看到 param : data，这是传递param的地方。

//Home.js

你应该得到数据以便：

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