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

Posted 2021-04-06

你好我是新来的和反应原生的初学者我试图制作一个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>
    )
}

}

这就是我收到数据的方式，请帮助我，我觉得我非常接近

答案

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

第一个sreen show，如何使用导航发送参数，在这种情况下我使用NavigationActions.reset，因为我重置路由（避免按钮返回），但在你的情况下

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

你应该看到param：data，这是传递param的地方

//home.就是

你应该得到数据：

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