Javascript 通过导航器将用户输入数据传递到选项卡栏IOS中的组件

首先，我是一名编程初学者，如果有人能为我提供一个对初学者友好的解释，我将不胜感激

我试图将用户数据从最初的“日期”输入页面传递到TabBarIOS的一个组件中。我试图通过将道具传递给navigator来实现这一点，因为输入页面直接导航到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}

  })
}

我在这里实现了，这样就可以呈现并返回用户输入的日期，以显示这样的日期；然后导航到选项卡栏组件：

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

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

{
this.setState（{date:newDate}）
}}
模式={'date'}
timeZoneOffsetInMinutes={-1*新日期（）。getTimezoneOffset（）}/>
{this.state.date.getDate（）}/{this.state.date.getMonth（）}/{this.state.date.getFullYear（）}
这个。导航（日期）}>
开始

之后，我尝试在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>

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

{
这是我的国家({
已选择选项卡：“主页”，
});
}}>

现在，以下是主视图组件：

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

class Home扩展组件{
渲染（）{
返回(
日期是{this.props.date}
);
}
}

有人能解释一下我做错了什么吗？如果有人需要更多的信息来回答这个问题，我可以提供必要的细节

---

谢谢你

自从这个问题发布以来，在学习和使用React Native一段时间后，我求助于flux体系结构来解决这个特定的问题

我使用Redux框架存储用户输入的数据，并在需要时轻松更新其状态。例如，用户现在可以使用Redux轻松地更改此日期数据，并且可以在我的所有组件之间调用它

关于通行道具，我在导航器组件中使用了passProps，例如：

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

然后在下面的组件中调用它，如下所示：

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

希望这能帮助任何人。

---

如果您需要进一步的澄清，请告诉我。

在这个问题发布后的一段时间里，我学习并使用React Native之后，我求助于flux体系结构来解决这个特定问题

我使用Redux框架存储用户输入的数据，并在需要时轻松更新其状态。例如，用户现在可以使用Redux轻松地更改此日期数据，并且可以在我的所有组件之间调用它

关于通行道具，我在导航器组件中使用了passProps，例如：

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

然后在下面的组件中调用它，如下所示：

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

希望这能帮助任何人。 如果您需要进一步澄清，请告诉我