Question

我是本机反应的新手，正在寻找是否有人可以详细指导我如何将参数传递给子选项卡。我已经进行了研究，发现可以使用screenprops来完成，但是没有一个让我对如何使用它传递参数有清晰的了解。干净的示例代码可能是有益的。谢谢你。

Answer 1

这很容易，因为您没有环顾四周，有很多软件包，我建议您使用以下软件包，并查看以下示例。下次在问问题之前需要研究所需的信息。

import React, { Component } from 'react';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

import SceneA from './SceneA';
import SceneB from './SceneB';

class Layout extends Component {
  constructor(props) {
    super(props);

    this.state = {
      index: 0,
      routes: [
        { key: 'active', title: 'Scene A' },
        { key: 'inactive', title: 'Scene B' },
      ],
    };

    this.renderScene = this.renderScene.bind(this);
    this.renderLabel = this.renderLabel.bind(this);
    this.onTabChange = this.onTabChange.bind(this);
  }

  onTabChange(index) {
    this.setState({ index });
  }

  // Here you can send props to different tab components 
  renderScene({ route }) {
    if (!route.key) return null;

    if (route.key === 'active') {
      return <SceneA type="active" />; // SceneA specific props here
    }

    if (route.key === 'inactive') {
      return <SceneB type="inactive" />;
    }
  }

  renderLabel({ route }, props) {
    const { index } = this.state;
    const selected = route.key === props.navigationState.routes[index].key;

    return (
      <View>
        <Text>
          {route.title.toUpperCase()}
        </Text>
      </View>
    );
  }

  renderTab() {
    return (
      <TabView
        navigationState={this.state}
        onIndexChange={this.onTabChange}
        renderScene={this.renderScene}
        renderTabBar={props => (
          <TabBar
            {...props}
            renderLabel={e => this.renderLabel(e, props)}
          />
        )}
      />
    );
  }

  render() {
    return (
      <View>
        {this.renderTab()}
      </View>
    );
  }
}

export default Layout;

如何在React Native中将参数从父活动传递到子选项卡？

1 个答案: