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

Question

首先，我是编程初学者，因此如果有人能为我的问题提供适合初学者的解释，我将不胜感激。

我正在尝试将用户数据从初始“日期”输入页面传递到属于 TabBarIOS 的一个组件中。我尝试通过导航器传递 props 来做到这一点，因为输入页面直接导航到 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 code在这里实现，以便用户输入的日期被渲染并返回以显示该日期，如下所示；然后导航到 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>

以下现在是主页组件:

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

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

谢谢

Answer 1

自从这个问题发布以来，在学习和使用 React Native 一段时间后，我针对这个特定问题诉诸了 Flux 架构。

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

关于一般传递 Prop ，我在我的导航器组件中使用了 passProps，如下所示:

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

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

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

确保在我的初始导航器中包含此内容:

...route.passProps

希望这可以帮助任何人。如果您需要进一步说明，请告诉我。