Réagissez les données d'entrée de l'utilisateur natif dans le composant IOS de la barre d'on par le biais du navigateur

Question

avant tout, je suis un débutant en programmation donc j'apprécierais vraiment que quelqu'un puisse me fournir une explication pour mon débutant. J'essaie de transmettre les données utilisateur de la page d'entrée initiale 'date' dans un composant qui fait partie de TabBarIOS. J'ai essayé de le faire en passant des accessoires à travers le navigateur, parce que la page d'entrée navigue directement vers le premier composant du TabBarIOS. Voici mon code:

class Details extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     date: new Date(), 

    onDateChange(date) { 
    this.setState ({date: date}); 
    } 

    navigate(){ 
    this.props.navigator.push({ 
    name: 'TabBar', 
    component: TabBar, 
    passProps: {date: this.date} 

    }) 
} 

Je l'œuvre DatePicker IOS code ici, de sorte que la date inputed de l'utilisateur est rendu et est retourné à montrer cette date comme celui-ci; naviguer ensuite au composant TabBar:

<DatePickerIOS 
     date={(this.state && this.state.date) || new Date()} 
     onDateChange={(newDate) => { 
     this.setState({date: newDate}) 
     }} 
     mode={'date'} 
     timeZoneOffsetInMinutes={-1 * new Date().getTimezoneOffset()} /> 
    </View> 

<View style = {styles.nameInput} value = {this.state.date}> 
     <Text> {this.state.date.getDate()}/{this.state.date.getMonth()}/{this.state.date.getFullYear()}</Text> 
     </View> 

    <TouchableHighlight style = {styles.button} onPress = {() => this.navigate(date)}> 
    <Text> Start </Text> 
    </TouchableHighlight> 

Ensuite, j'essaie de le faire dans le composant TabBar:

<TabBarIOS.Item 
     selected = {this.state.selectedTab === 'Home'} 
     systemIcon = "history" 
     onPress={() => { 
     this.setState({ 
      selectedTab: 'Home', 
     }); 
     }}> 
    <Home date = {this.date}></Home> 
    </TabBarIOS.Item> 

Voici maintenant le composant Accueil:

class Home extends Component { 
    render() { 
    return (
     <Text> The date is {this.props.date} </Text> 
     ); 
     } 
     } 

Quelqu'un peut-il expliquez-moi ce que je fais mal ici - si quelqu'un a besoin de plus d'informations pour répondre à cette question, je peux fournir les détails nécessaires.

Merci

Answer 1

après avoir appris et utiliser React natif pour une période de temps depuis que cette question a été posté, j'ai eu recours à l'architecture de flux pour ce problème spécifique. J'ai utilisé le framework Redux pour stocker les données entrées par l'utilisateur et mettre facilement à jour son état en cas de besoin. Par exemple, cette date peut être facilement modifiée par l'utilisateur en utilisant Redux, et elle peut être appelée entre tous mes composants.

En ce qui concerne le passage des accessoires en général, je l'ai utilisé passProps dans mon composant navigateur comme celui-ci, par exemple:

navigate() { 
    this.props.navigator.push({ 
    name: 'XYZ', 
    component: XYZ, 
    passProps: { 
     ex1: this.state.ex2, 
    }, 
} 

Et puis appelez dans mon composant suivant comme ceci:

<Text>{props.ex1}</Text> 

faire en sorte d'avoir dans mon navigateur initial:

...route.passProps 

espoir thi s pourrait aider n'importe qui. Faites-moi savoir si vous avez besoin de plus de précisions.