Question

我正在开始使用本机响应，希望有人可以帮助我解决我面临的小问题。

所以我有一个带有所有商店名称和ID的主api，基本上所有要做的就是用商店名称和名称加载react native应用的顶部栏提取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链接填充了每个标签内的内容，没有任何问题。

我只是从本机开始，任何帮助深表感谢。

React Native dynamic-来自Api的列表视图

0 个答案: