Question

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

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

第一个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.js

你应该得到数据：

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

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

1 个答案: