Odpowiednik Passprops dla Navigatora?

Question

Próbuję przekonwertować z NavigatorIOS na Navigator i nie mogę się domyślić, jak zrobić passprops. Próbuję przekazać dwie zmienne, LRA i e-mail do następnej sceny, ale wciąż jestem niezdefiniowana. Jestem na to nowy, więc przykro mi, jeśli to łatwe pytanie. Oto mój kod do tej pory, nie krępuj się udzielać mi innych wskazówek, które uważasz za niewłaściwe!

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

Prawdopodobnie musisz oddzielić Navigatora od własnego komponentu, możesz w razie potrzeby przypisać wymagane właściwości do nawigatora (w tym przypadku ... route.passProps rozkłada operator będący właściwością ustawiającą parametry passProps dla użycie przez nawigatora).

Skonfigurowałem projekt z Twoim kodem herehttps://rnplay.org/apps/V_EhdA.

Poniżej podano kod, pod którym działałem.

'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

nie jestem, że doświadczenie z React Native jeszcze, więc to może nie być najlepszą praktyką, ale skończyło się

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

Gdzie można route.component być dowolnym z ekranów (główne widoki).

a następnie ustawiając stan na samej Navigator, ponieważ ma swój własny stan i jest teraz przekazywana jako rekwizyt do każdego Widok:

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

Do pewnego stopnia to jest składnikiem wysokiej klasy.