Question

我正在使用React Native制作App框架。框架包括一些基本屏幕，如登录屏幕，标签屏幕。该框架的目的是为新应用程序提供基础设计，这将从头开始。

标签屏幕

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

为此，我需要将视图/组件数组作为支柱传递给TabScreen。

如何创建View / Component数组？
如何将数组作为道具传递给TabScreen？

下面是TabScreen的代码

＆＃13;

'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;

＆＃13;

请帮忙

Answer 1

您不需要传递一组react本机组件，您必须使用组件的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>
    );
  }

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

如何创建View / Component数组？

就像任何其他阵列一样。例如，使用map：

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

如何将数组作为道具传递给TabScreen？

当涉及到道具时，数组与任何其他数据类型没有区别（任何变量都可以作为道具传递，除非它具有某种验证机制，在这种情况下它会引发警告）。

如何在本机中传递View / Component数组？

1 个答案: