React Native将用户输入数据传递到Tab Bar IOS中的组件，通过Navigator

Question

在此之前，我是编程的初学者，所以如果有人能为我提供有关我的问题的初学者友好解释，我将非常感激。

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

  })
}

我在这里实现了DatePicker IOS代码 ，以便呈现用户的输入日期并返回以显示这样的日期; 然后导航到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>

之后，我尝试在TabBar组件中执行此操作：

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

以下是Home组件：

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

有人可以向我解释我在这里做错了吗 - 如果有人需要更多信息来回答这个问题，我可以提供必要的细节。

谢谢

Answer 1

自从这个问题发布以来，在学习并使用React Native一段时间之后，我采用了flux结构来解决这个特定的问题。

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

关于一般传递道具，我在我的导航器组件中使用了passProps，例如：

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

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

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

确保在我的初始导航器中有这个：

...route.passProps

希望这可以帮助任何人。 如果您需要进一步澄清，请与我们联系。