Question

好的，我放弃了。这必须是如此基本，没有人在任何地方记录它。

我有3个基本组件，所有组件都可以从3个Tab项目的基本组件中单击。

如何模拟用户点击其中一个标签项？例如，假装component1有一个动作 - 成功时 - 将用户引导到component2（就好像他们从tabitem中点击它一样）

我可以提供一些代码，否则假设我有一个基本的教程应用程序。我觉得我所寻找的本质上是一种超链接。

Answer 1

您可能应该将反应组件视为树，并且您可以将要从父项触发的函数传递给子项作为道具。

假设你有一个Tab组件 -

self

如果您想模仿触摸，只需在组件内拨打const Tab = React.createClass({ onPressButton(){ triggeredFunction(); }, render() { return ( <Button onPress={this.onPressButton}> <Text>Press Me!</Text> </Button> ); }, });（或triggeredFunction()）即可。

如果您尝试从父组件触发该函数，您可能应该在父组件中具有触发函数并将其作为prop传递 -

this.onPressButton

然后在你的主要组件中

const Tab = React.createClass({

propTypes: {
  onPressButton: React.PropTypes.func,
  tabNumber: React.PropTypes.number,
  tabText: React.PropTypes.string,
},

triggerTheTriggerToTrigger() {
  // This will trigger the triggeredFunction in the page component and pass in the tab number
  // Remember that onPressButton={this.triggeredFunction}
  // So you are calling this.triggeredFunction(tabNumber) in the parent page component
  this.props.onPressButton(this.props.tabNumber);
},

  render() {
    return (
      <Button onPress={this.triggerTheTriggerToTrigger}>
        <Text>{this.props.tabText}</Text>
      </Button>
    );
  },

});

然后您可以从主要组件调用const Page = React.createClass({ getInitialState() { return { currentTab: 1, }; }, triggeredFunction(tabNum) { // This function is setting the state of the page component to be equal to that passed from the tab // So when the tab is touched it will trigger the page to change to that number. this.setState({ currentTab: tabNum, }); }, // main component render: render() { let content; // We are setting the page 'content' from here // Choosing the content from the currentTab state switch (this.state.currentTab) { case 1: content = <Text>This is the content for tab 1</Text> break case 2: content = <Text>Tab 2 has a slightly different message</Text> break case 3: content = <Text>Tab 3 is slightly different too</Text> break } return ( <View className="page"> <View className="toptabs"> <Tab onPressButton={this.triggeredFunction} tabText="Button 1" tabNumber={1} /> <Tab onPressButton={this.triggeredFunction} tabText="Button 2" tabNumber={2} /> <Tab onPressButton={this.triggeredFunction} tabText="Button 3" tabNumber={3} /> </View> <View className="pageContent"> {content} </View> </View> ); }, });。我希望这是有道理的。

我还没有对这段代码进行测试，所以可能需要进行一些调整，但希望它会向您展示它背后的逻辑。

另外，我在这里使用switch语句来显示正在发生的事情。我不太可能在一个真实的应用程序中使用这种方法（并不是特别糟糕）。您还可以加载其他组件并根据currentTab状态有条件地加载它们。你可以创建一个内容数组，并有 - this.triggeredFunction()

您也可以通过其他方式实现这一目标。我在我的应用程序中使用flux，其中包含您更新的商店。然后，这些存储使用数据传播视图。这意味着您可以获得更多全局设置。如果你使用flux，那么你基本上会设置页面状态（即tabNumber）来自flux。

因此，在您的标签中，您可以将onPressButton设置为 - let content = contents[this.state.currentTab]; 这将更新全局存储以设置您所使用的tabNumber（即您不再只是在页面组件上设置currentTab）

在您的页面中，您可以通过以下方式获取currentTab状态： this.flux.action.updateTab(this.props.tabNumber); 因此，商店会在更新时更新您的页面组件。

但这是一个比你正在使用的更复杂的实现，它超出了我们在这里讨论的范围。不要担心这部分是否令人困惑，但如果你将来构建更大的东西，可能会有所帮助（想象10个不同的app＆＃39;页面＆＃39;有不同的东西的标签部分，突然你想要一个存储位置，你可以控制它们的状态，而不是在每组组件中。）

如何使用React Native在组件中触发tabItem onPress？

1 个答案: