如何在本机反应中制作动态标签视图屏幕答案

【问题标题】：How to make dynamic tab view screen in react native如何在本机反应中制作动态标签视图屏幕
【发布时间】：2020-11-19 16:41:41
【问题描述】：

我正在尝试在我的 react 本机应用程序中添加选项卡。在选项卡上，我想显示来自 api 的所有数据。这给出了string 的数组。当用户单击任何选项卡时，它应该显示相应的数据。这是一个示例图像。

在标题下方我想显示来自 ap 的字符串数组。在搜索字段下方，我想显示来自不同 api 的数据。

我正在使用一个包 https://www.npmjs.com/package/react-native-tab-view 。我不知道如何用这个来实现这一点。

这是我的代码

import { TabView, SceneMap } from "react-native-tab-view";
import { connect } from "react-redux";
import { getAllState } from "../../actions/hubActions";

interface CommunityMemberProps {
  getStates: () => void;
  allStates: [];
}
const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: "#ff4081" }]} />
);

const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: "#673ab7" }]} />
);

const initialLayout = { width: Dimensions.get("window").width };

const CommunityMember = ({ getStates, allStates }: CommunityMemberProps) => {
  useEffect(() => {
    getStates();   
  }, []);
  const [searchText, setSearchText] = useState<string>("");
  const handleChangeText = (text: string) => {
    setSearchText(text);
  };
  console.log("allStates", allStates);  <-- this gives data ["India", "newDelhi"]

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: "First", title: "First" },
    { key: "Second", title: "Second" },
  ]);


  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });
  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
};

function mapStateToProps(state: any) {
  return {
    allStates: state.hub.allStates,
  };
}
const mapDispatchToProps = (dispatch: any) => ({
  getStates: () => dispatch(getAllState()),
});

export default connect(mapStateToProps, mapDispatchToProps)(CommunityMember);

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

由于您使用的是 redux，这很容易做到。每当您选择一个选项卡时，都会使用选定的选项卡更新 redux 状态。保持所有选项卡的组件相同，并使用 mapStateToProps 从 redux 状态检索选项卡并动态获取数据并使用 useEffect 或 componentDidMount() 挂钩。

【讨论】：