javascript - React Native 动态 - 来自 Api 的列表视图

Question

我开始使用 react native，希望有人可以帮助我解决我面临的小问题。

所以我有一个包含所有商店名称和 ID 的主 api，基本上所有想要做的就是加载带有商店名称的 react 本机应用程序的顶部栏并提取 ID 并将其附加到商店链接并将其生成到列表视图.

到目前为止，我只能从 REST Api 链接附加商店名称，但无法添加列表视图。

我的目标是使用一个类文件并使用不同的商店内容填充所有单独的选项卡。下面的代码

const STARTUPLINK = "https//staruptest.com/defaultStartup";
const STORE_URL = "https//staruptest.com/store/mobile&id=";


     class Shop1 extends Component{
       render() {
         return(
            //STORE_URL+ID
          //Listview 
         );
       }
     }

  class Shop2 extends Component{
       render() {
         return(
            //STORE_URL+ID
          //Listview 
         );
       }
     }

  class Shop3 extends Component{
       render() {
         return(
            //STORE_URL+ID
          //Listview 
         );
       }
     }

  class Shop4 extends Component{
       render() {
         return(
            //STORE_URL+ID
          //Listview 
         );
       }
     }


 const components = {
   // only works when shop name matches the componet name 
  Shop1, Shop2, Shop3,Shop4
  //
}


export default class TopNavigationTabs extends Component {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    fetch(STARTUPLINK).then(res => res.json()).then(res => {
      const screens = {};
      const ShopURL={};
      res.shops.forEach(shops => {
        screens[shops.name] = { screen: components[shops.name],
          navigationOptions: { 
            title: shops.name ,
                    tabBarOptions: {
                        scrollEnabled: true,
                        labelStyle: {fontSize: 10},

                    tabStyle:{width: Dimensions.get('window').width / 4,},
                    style: {backgroundColor: '#0C84D8',},
                    indicatorStyle: {backgroundColor: '#fff',}
                },}};  
                console.log(shops.name)
                console.log(STORE_URL+shops.id)
      }); 
      const tabs = createMaterialTopTabNavigator(screens)
      this.setState({ tabs: tabs });
    });
  }

  render() {
    if (this.state.tabs) {
      return (<this.state.tabs />);
    } 
    return (

      <View>
        <Text> Loading ... </Text>
        </View>

    )
  }
} 

因此，我需要一个可以跨所有选项卡动态生成内容的类，而不是使用 Store1、Store2、Store3，而是安装在组件上，因此一个商店在 Api 上被禁用，它将自动从应用程序中删除。

什么工作：选项卡名称从 Api 中提取并填充，没有任何问题，只是根据不同的商店 ID 链接每个选项卡内的内容。

我刚开始使用本机反应，非常感谢任何帮助。

标签： javascriptreactjsreact-nativejsx