PasspropsはNavigatorと同等ですか？

Question

NavigatorIOSからNavigatorに変換しようとしていますが、passpropsを動作させる方法を理解できていないようです。私は2つの変数、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

ナビゲータを独自のコンポーネントに分ける必要があるかもしれませんが、必要に応じてナビゲータに必要なプロパティを割り当てることができます（この場合、path.passPropsスプレッド演算子はプロパティを設定するpassProps forナビゲータによる使用）。

コードherehttps://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

はネイティブリアクトまだ、これはベストプラクティスではないかもしれませんが、私は

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

route.componentができになってしまいましたあなたのスクリーン（メインビュー）のいずれかになります。

そして、それは自身の状態を持っており、それは今、すべてのビューに小道具として渡されているので、ナビゲーター自体に状態を設定する：

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

ある程度まではそれが高次のコンポーネントです。