反応したネイティブでView/Componentの配列を渡すには？

Question

私はReact NativeでAppフレームワークを作っています。フレームワークは、ログイン画面、タブ画面などの基本画面で構成されています。このフレームワークの目的は、根本から開発される新しいアプリに基本的なデザインを提供することです。

タブ画面

私たちは、それぞれのタブを表示するには、個々のビューを持つことになります知っているよう。私はタブスクリーンを完全にカスタマイズ可能にしたい。これは、渡されたビューリストとタブリストに基づいて、レンダリングする必要があることを意味します。

私はTabScreenの小道具としてView/Componentの配列を渡す必要があります。

1. どのようにView/Componentの配列を作成できますか？
2. TabScreenに小道具として配列を渡すにはどうすればいいですか？以下

あなたはネイティブコンポーネントを反応させるの配列を渡す必要はありません

Answer 1

、あなたが使用する必要が助けてください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;

のコードですコンポーネントの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と、例えば：

TabScreenに小道具として配列を渡す方法

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

？それは小道具（それが警告を発生させます。その場合には検証メカニズムのいくつかの並べ替えを持っていない限り、すべての変数は、小道具として渡すことができます）に来るとき

配列は、他のデータ型に違いはありません。