React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件

React Native Passing User Input Data to Component in Tab Bar IOS through Navigator

本文关键字：选项 IOS 组件 Navigator 通过 Native 用户 数据 输入 React      更新时间：2023-09-26

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

我正试图将用户数据从最初的"日期"输入页面传递到TabBarIOS的一个组件中。我试图通过navigator传递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代码，这样用户输入的日期就会被呈现并返回，以显示这样的日期；之后导航到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>
        );
       }
      }

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

谢谢

自从这个问题发布以来，在学习并使用React Native一段时间后，我针对这个特定问题求助于通量架构。

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

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

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

然后在下面的组件中这样调用它：

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

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

...route.passProps

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

相关文章：