如何使用 React Native 在组件内触发 tabItem onPress? [英] How can I trigger a tabItem onPress within a component using React Native?

问题描述

好吧，我放弃了.这一定是非常基础的，没有人在任何地方记录过.

Ok, I give up. This must be so basic, no one documented it anywhere.

我有 3 个基本组件，所有组件都可以从带有 3 个标签项的基本组件中点击.

I have 3 basic components, all clickable from a basic with 3 Tab Items.

如何模拟用户单击其中一个选项卡项目?例如，假装 component1 有一个动作 - 当成功时 - 将用户定向到 component2(就像他们从 tabitem 中点击它一样)

How can I emulate a user clicking one of the tab items? For example, pretend component1 has an action - that when successful - directs the user to component2 (as if they clicked it from the tabitem)

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

I can provide some code, otherwise just assume I have a basic tutorial app. I feel like what I'm looking for is essentially a hyper-link.

推荐答案

您可能应该将 react 组件视为一棵树，您可以将要触发的函数作为 props 从父级传递给子级.

You should probably see the react components as a tree and you can pass the function that you want to trigger from parents to children as props.

假设你有一个 Tab 组件 -

Say you have a Tab component -

const Tab = React.createClass({

  onPressButton(){
    triggeredFunction();
  },

  render() {
    return (
      <Button onPress={this.onPressButton}>
        <Text>Press Me!</Text>
      </Button>
    );
  },

});

如果您想模拟触摸，您可以简单地调用 triggeredFunction()(或从组件内调用 this.onPressButton).

You can simply call triggeredFunction() (or this.onPressButton from within the component) if you want to emulate the touch.

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

If you are trying to trigger the function from a parent component, you should probably have the triggered function in the parent and pass it as prop -

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>
    );
 },
});

然后你可以从主组件调用this.triggeredFunction().我希望这是有道理的.

Then you can call this.triggeredFunction() from the main component instead. I hope this makes sense.

我尚未测试此代码，因此可能需要进行一些调整，但希望它向您展示其背后的逻辑.

I haven't tested this code, so it might need some tweaking, but hopefully it shows you the logic behind it.

另外，我在这里使用 switch 语句来使发生的事情变得显而易见.我可能不会在真正的应用程序中使用这种方法(并不是说它特别糟糕).您还可以加载其他组件并根据 currentTab 状态有条件地加载它们.您可以创建一个内容数组并具有 -let content = contents[this.state.currentTab];

Also, I'm using a switch statement here to make what is going on obvious. I wouldn't probably use this method in a real app (not that it's particularly awful). You could also load in other components and conditionally load them based on the currentTab state. You could create an array of contents and have - let content = contents[this.state.currentTab];

您也可以通过其他方式实现这一点.我在我的应用程序中使用了 Flux，它由您更新的商店组成.这些存储然后传播带有数据的视图.这意味着您将获得更多的全局设置.如果您使用的是flux，那么您基本上可以从flux 设置页面状态(即tabNumber).

You can also achieve this through other means. I'm using flux in my app, which consists of store that you update. These stores then propagate the view with data. This means you get more of a global setting. If you were using flux then you would basically set the page state (i.e. tabNumber) from flux.

因此，在您的选项卡中，您可以将 onPressButton 设置为 -<代码>this.flux.action.updateTab(this.props.tabNumber);这将更新全局存储以设置您所在的 tabNumber(即您不再只是在页面组件上设置 currentTab)

So, in your tab you could set onPressButton to - this.flux.action.updateTab(this.props.tabNumber); This would update the global store to set what tabNumber you are on (i.e. you are not just setting currentTab on the page component anymore)

在您的页面中，您可以从以下内容中获取 currentTab 状态 -<代码>currentTab: this.flux.store.tabStore.getCurrentTab()因此，商店会在更新时更新您的页面组件.

And in your page you could get your currentTab state from something like - currentTab: this.flux.store.tabStore.getCurrentTab() So the store updates your page component when it updates.

但这比您使用的实现更复杂，超出了我们在此讨论的范围.如果这部分令人困惑，请不要担心，但如果您将来要构建更大的东西，考虑它可能会有所帮助(想象 10 个不同的应用程序页面"，其中包含用于不同事物的选项卡部分，突然间您想要一个存储位置可以控制它们的状态，而不是在每组组件中).

But this is a more complicated implementation than you are using and it's beyond the scope of what we are discussing here. Don't worry if that part is confusing, but it may be helpful to consider it if you are building something larger in the future (imagine 10 different app 'pages' with tab sections for different things, suddenly you want a storage place where you can control the state of them, rather than in each set of components).

这篇关于如何使用 React Native 在组件内触发 tabItem onPress?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！