Question

我正在尝试从NavigatorIOS转换为Navigator，似乎无法弄清楚如何使passprops工作。我试图将两个变量，LRA和电子邮件传递给下一个场景，但我一直未定义。我对此非常陌生，所以如果这是一个简单的问题，我很抱歉。这是我的代码到目前为止，随时给我任何其他你看错了的提示！

DataEntry.js

  class DataEntry extends Component {
    constructor(props) {
      super(props);
        this.state = {
          emailString: 'default@gmail.com',
          isLoading: false,
          message: '',
        mailerror: false,
        lraerror: false
        };
    }

  onEmailTextChanged(event) {
    this.setState({ emailString: event.nativeEvent.text });
    if (!validateEmail(this.state.emailString)){
      this.emailError = "Please enter a valid email"
      this.setState({error: true})
    }
    else{
      this.emailError = ""
      this.setState({error: false})
    }
    }

  onLRATextChanged(event) {
    this.setState({ LRAString: event.nativeEvent.text });
    if (!isValidID(this.state.LRAString)){
      this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters"
      this.setState({error: true})
    }
    else{
      this.LRAError = ""
      this.setState({error: false})
    }
  }

  gotoNext() {  
    var emailtext = this.state.emailString
    var LRAtext = this.state.LRAString
    console.log(emailtext)
    this.props.navigator.push({
        id: 'PasswordView',
        name: 'Generated Password',
        email: emailtext,
        LRA: LRAtext
    });
  }

  renderScene(route, navigator) {
    var email = this.state.emailString
    var LRA = this.state.LRAString
    return (    
      <View style={styles.container}>
            <Text style={styles.description}>
                Please enter the email and LRA
            </Text>

            <View style={styles.flowRight}>
              <TextInput
                style={styles.searchInput}
                value={this.state.emailString}
                onChange={this.onEmailTextChanged.bind(this)}
                placeholder='Enter Email'/>
            </View>

            <Text style={styles.error}>
              {this.emailError}
            </Text>

            <View style={styles.flowRight}>
              <TextInput
                style={styles.searchInput}
                value={this.state.LRAString}
                onChange={this.onLRATextChanged.bind(this)}
                placeholder='Enter LRA ID'/>
            </View>

            <Text style={styles.error}>
              {this.LRAError}
            </Text>


            <TouchableHighlight style={styles.button}
                underlayColor='#99d9f4'
                onPress={this.gotoNext.bind(this)}>
               <Text style={styles.buttonText}>Retrieve Password</Text>
            </TouchableHighlight>
        <Text style={styles.description}>{this.state.message}</Text>
      </View>
    );
  }
render() {
        return (
          <Navigator
          renderScene={this.renderScene.bind(this)}
          navigator={this.props.navigator}
          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: '#48BBEC', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
        );
      }  
}

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    return null;
  },
  RightButton(route, navigator, index, navState) {
    return null;
  },
  Title(route, navigator, index, navState) {
    return (
      <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
        <Text style={{color: 'white', margin: 10, fontSize: 16}}>
          Data Entry
        </Text>
      </TouchableOpacity>
    );
  }
};


module.exports = DataEntry;

Answer 1

您可能需要将导航器分离到自己的组件中，然后您可以根据需要在导航器上分配所需的属性（在这种情况下，... route.passProps spread运算符是设置passProps以供使用的属性由导航员）。

我已使用https://rnplay.org/apps/V_EhdA的代码设置项目。

以下是我用来使其正常工作的代码。

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  Navigator,
  TouchableHighlight
} = React;

function isValidID(string) {
    return true
}

var Two = React.createClass({
    render(){
    return(
        <View style={{marginTop:100}}>
          <Text style={{fontSize:20}}>Hello From second component</Text>
          <Text>id: {this.props.id}</Text>
          <Text>name: {this.props.name}</Text>
        </View>
    )
  } 
})

var Main = React.createClass ({

    getInitialState() {
        return {
          emailString: 'default@gmail.com',
          isLoading: false,
          message: '',
          mailerror: false,
          lraerror: false
      }
    }, 

  onEmailTextChanged(event) {
    this.setState({ emailString: event.nativeEvent.text });
    if (!validateEmail(this.state.emailString)){
      this.emailError = "Please enter a valid email"
      this.setState({error: true})
    }
    else{
        this.emailError = ""
        this.setState({error: false})
      }
    },

  onLRATextChanged(event) {
    this.setState({ LRAString: event.nativeEvent.text });
    if (!isValidID(this.state.LRAString)){
      this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters"
      this.setState({error: true})
    }
    else{
      this.LRAError = ""
      this.setState({error: false})
    }
  },

  gotoNext() {  
    var emailtext = this.state.emailString
    var LRAtext = this.state.LRAString
    this.props.navigator.push({
        passProps: {
            id: 'PasswordView',
            name: 'Generated Password',
            email: this.state.emailstring,
            LRA: LRAtext,
        },
        component: Two
    });
  },

    render() {
      var email = this.state.emailString
      var LRA = this.state.LRAString
      return (
        <View style={styles.container}>
            <Text style={styles.description}>
                Please enter the email and LRA
            </Text>

            <View >
              <TextInput
                style={{height:40}}
                value={this.state.emailString}
                onChange={this.onEmailTextChanged.bind(this)}
                placeholder='Enter Email'/>
            </View>

            <Text >
              {this.emailError}
            </Text>

            <View >
              <TextInput
                style={{height:40}}
                value={this.state.LRAString}
                onChange={this.onLRATextChanged.bind(this)}
                placeholder='Enter LRA ID'/>
            </View>

            <Text>
              {this.LRAError}
            </Text>

            <TouchableHighlight style={{padding:30}}
                underlayColor='#99d9f4'
                onPress={ () => this.gotoNext() }>
               <Text>Retrieve Password</Text>
            </TouchableHighlight>

        <Text >{this.state.message}</Text>
      </View>
    );
}
})

class DataEntry extends React.Component {
    constructor(props) {
      super(props);
    } 
        render() {
        return (
          <Navigator
          configureScene={() => {
                      return Navigator.SceneConfigs.FloatFromRight;
                  }}
          initialRoute={{name: 'ComponentName', component: Main, index: 0}}
          renderScene={(route, navigator) =>    {
            if (route.component) {
                          return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
                      }
        }}

          navigationBar={
            <Navigator.NavigationBar 
            style={{backgroundColor: '#48BBEC', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
        );
      }  
}

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return (
      <TouchableHighlight  style={{marginTop: 10}} onPress={() => {
            if (index > 0) {
              navigator.pop();
            } 
        }}>
       <Text>Back</Text>
     </TouchableHighlight>
 )} else {
 return null}
 },
  RightButton(route, navigator, index, navState) {
    return null;
  },
  Title(route, navigator, index, navState) {
    return (
      <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
        <Text style={{color: 'white', margin: 10, fontSize: 16}}>
          Data Entry
        </Text>
      </TouchableOpacity>
    );
  }
};

var styles = StyleSheet.create({
    container: {flex:1},
    description: {flex:1}
})

AppRegistry.registerComponent('DataEntry', () => DataEntry);

Answer 2

我还没有React Native的经验，所以这可能不是最好的做法，但我最终还是

renderScene: function(route, navigator) {
  return (
    <route.component route={route} navigator={navigator} />
  );
}

其中route.component可以是您的任何屏幕（主要视图）。

然后在Navigator上设置状态，因为它有自己的状态，现在它作为prop传递给每个View：

this.props.navigator.setState({isLoading: true});

在某种程度上，它是一个高阶组件。

Passprops等效于Navigator？

2 个答案: