如何在 React Native 中传递 View/Component 数组？

Question

我正在用 React Native 制作 App 框架。框架由一些基本屏幕组成，如登录屏幕、选项卡屏幕。该框架的目的是为将从头开始开发的新应用程序提供基础设计。

选项卡屏幕

正如我们所知，每个选项卡都会显示单独的视图。我想让 tabscreen 完全可定制。这意味着基于传递的视图列表和选项卡列表，它应该呈现。

为此，我需要将 View/Component 数组作为道具传递给 TabScreen。

如何制作 View/Component 的数组？
如何将数组作为 props 传递给 TabScreen？

下面是TabScreen的代码

'uses strict'

import {StyleSheet, View, Text, Image} from 'react-native';
import React, {Component, PropTypes} from 'react';
import {IndicatorViewPager, PagerTabIndicator} from 'rn-viewpager';

export default class TabScreen extends Component {
  
  constructor (props) {
    super(props)
  }
  
  static propTypes = {
    views : PropTypes.arrayOf(PropTypes.instanceOf(View)).isRequired,
    tabs: PropTypes.arrayOf(PropTypes.shape({
      text: PropTypes.string,
      iconSource: Image.propTypes.source,
      selectedIconSource: Image.propTypes.source
    })).isRequired,
  }
  render() {
    
    return (
      <View style={{flex:1}}>
      <IndicatorViewPager
      style={{flex:1, paddingTop:20, backgroundColor:'white'}}
      indicator={<PagerTabIndicator tabs={this.props.tabs} />}>
      {views}
      </IndicatorViewPager>
      </View>
    );
  }
}
module.exports = TabScreen;

请帮忙

Answer 1

不需要传递一个react native组件的数组，你必须使用组件的children，像这样：

在你的上层组件的render方法中：

<TabScreen>
    <View><Text>First tab</Text>
    <View><Text>Second tab</Text></View>
    {/* And so on... */}
</TabScreen>

然后，在您的 TabScreen 组件中，只需执行以下操作：

render() {

    return (
      <View style={{flex:1}}>
      <IndicatorViewPager
      style={{flex:1, paddingTop:20, backgroundColor:'white'}}
      indicator={<PagerTabIndicator tabs={this.props.tabs} />}>
      {this.props.children}
      </IndicatorViewPager>
      </View>
    );
  }

无论如何，回答您的问题：

How can I make array of View/Component?

与任何其他阵列一样。例如，使用 map:

let elements = ['First Tab', 'Second Tab'].map((text)=> <View><Text>{text}</Text></View>))

How to pass array as props to TabScreen?

在 props 方面，数组与任何其他数据类型没有什么不同（任何变量都可以作为 prop 传递，除非它具有某种验证机制，在这种情况下它会引发警告）。

如何在 React Native 中传递 View/Component 数组？

How to pass array of View/Component in react native?

android

android-viewpager

react-native

react-native-android