Question

我从对象[{"id:1","title": "News",....},"id":2, "title": "History", .....}]的Web服务数组中获取，所以我想创建选项卡并使用react-native-scrollable-tab-view https://github.com/skv-headless/react-native-scrollable-tab-view滚动，对于静态它工作得很好，但我不喜欢我不知道如何制作动态，因为管理员可以随时添加更多标题，因此静态不能用于此目的。

在我的代码中，我喜欢这个

 constructor(props){
        super(props);
        this.state = {
            ws: []
        };
    }

另外

componentDidMount() {
        fetch('http://localhost:8000/api/getThemeByOrganisations', {
            }).then((response) => response.json())
                .then((res) => {
                    this.setState({ 
                        ws : ws
                     });
                })
                .catch((error) => {
                    console.error(error);
                });
    };

我想制作组件名称，就像我从网络服务（标题）示例NewsComponent中获得的那样最后我想这样做，但动态

var App = React.createClass({
  render() {
    return (
      <ScrollableTabView renderTabBar={() => <CustomTabBar someProp={'here'} />}>
        <ReactPage tabLabel="React" />
        <FlowPage tabLabel="Flow" />
        <JestPage tabLabel="Jest" />
      </ScrollableTabView>
    );
  }
});

所以在这里，我想在“ws”中做，并创建动态页面，所以任何人都可以帮助我，谢谢你

Answer 1

要从对象数组中呈现组件，可以使用map。一个例子是：

render() {
  return (
    <View>
      {myArray.map(item => <TargetComponent {...item}/>)}
    </View>
  )
}

Answer 2

因此使用react-native-scrollable-tab-view
首先，我创建新组件ResultItem

 var ResultItem = React.createClass({
  render: function() {
    return (
        <Text tabLabel>
            {this.props.result.nom}
        </Text>  
    );
  }
});

渲染主要组件

中的第二个

<ScrollableTabView
               renderTabBar={() => <ScrollableTabBar />}>
               {this.state.ws.map(function (result) {
                             return <ResultItem key={result.id} result={result} tabLabel={result.nom}/>;
                        })}
                    </ScrollableTabView>

它适用于动态渲染

创建动态组件反应（本机）

2 个答案: