如何在本機反應中制作動態選項卡視圖屏幕

Question

我正在嘗試在我的本機應用程序中添加標簽。 在選項卡上，我想顯示來自 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);

Answer 1

由於您使用的是 redux，因此可以輕松完成。 每當您選擇一個選項卡時，都會使用選定的選項卡更新 redux 狀態。 保持所有選項卡的組件相同，並使用 mapStateToProps 從 redux 狀態檢索選項卡並動態獲取數據和 useEffect 或 componentDidMount() 鈎子。