Navigator için eşdeğer geçişler var mı?

Question

NavigatorIOS'tan Navigator'a dönüştürmeye çalışıyorum ve geçiş yollarının nasıl işleneceğini anlayamıyorum. İki değişkeni, LRA'yı ve bir sonraki e-postaya geçmeye çalışıyorum ama tanımsız olmaya devam ediyorum. Bu konuda çok yeniyim, bu çok kolay bir soru ise üzgünüm. İşte kodum şu ana kadar, yanlış gördüğünüz diğer ipuçlarını bana vermekten çekinmeyin! Birlikte deneyimli değilim

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

Muhtemelen Navigator'unuzu kendi bileşenine ayırmanız gerekir, ardından ihtiyaç duyduğunuz özellikleri gerektiğinde gezgininizde atayabilirsiniz (bu durumda, bu durumda, ... route.passProps yayıcı operatörü navigator tarafından kullanımı).

Projeyi, herehttps://rnplay.org/apps/V_EhdA kodunuzla kurdum.

Çalıştırmak için kullandığım kod aşağıdadır.

'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

Yerli Tepki henüz, bu nedenle bu en iyi uygulama olmayabilir ama

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

route.component can ile sona erdi Ekranlarınızdan herhangi biri (ana Görünüm). kendi durumu vardır ve şimdi her Görünüm figüran olarak geçirilir beri Navigator kendisinde durumunu ayarlama

Ve sonra: bir Yüksek al Bileşen bazı ölçüde

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

.