ネイティブでTab Bar IOSのコンポーネントにユーザー入力データを渡します.Navigatorから

Question

何かの前に、私はプログラミングの初心者です。誰でも私の問題の初心者に優しい説明を私に提供できるかどうか本当に感謝します。

最初の '日付'入力ページのユーザーデータをTabBarIOSの一部である1つのコンポーネントに渡そうとしています。入力ページがTabBarIOSの最初のコンポーネントに直接ナビゲートするので、ナビゲータを介して小道具を渡すことでこれを実行しようとしました。ここ は私のコードです：

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} 

    }) 
} 

ユーザーのinputed日付がレンダリングされ、このようにその日付を表示するために返されるように、私は、ここにDatePicker IOS codeを実装しています。その後TabBarのコンポーネントに移動：

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

缶誰か：

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

次は今ホームコンポーネントです：

<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> 

をその後、私は、TabBarのコンポーネントにこれを実行してみてください私がここで間違っていることを説明してください。誰かがこの質問に答えるためにもっと多くの情報を必要とするなら、必要な詳細を提供することができます。

を学び、この質問が投稿されていますので、しばらくの間、ネイティブに反応使用した後、あなた

Answer 1

をありがとう、私はこの特定の問題のためにフラックスアーキテクチャに頼っ。

私はReduxフレームワークを使用してユーザー入力データを保存し、必要に応じてその状態を簡単に更新しました。たとえば、このデータは、Reduxを使用して簡単に変更でき、すべてのコンポーネント間で呼び出すことができます。

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

をし、このように私の次のコンポーネントでそれを呼び出す：一般的に小道具を渡すことに関しては

、私は、例えば、このような私のナビゲーターコンポーネント内passPropsを使用していた

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

私の最初のナビゲータでこれを持っていることを確認してください：

...route.passProps 

希望thi誰も助けることができます。 詳しい説明が必要な場合はお知らせください。