React Native：ユーザー定義コンポーネントを定義するベストプラクティスは何ですか？

Question

const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}> 
     <View style={[styles.itemVTextBox, 
     isActive ? styles.activeItemVTextBox : null 
     ]}> 
     <Text style={[ 
      styles.item, 
      isActive ? styles.activeItem : null 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
); 

誰かがこのコードをrenderに書きます。

このコードをimportとclass defineの間に挿入すると、このコードも機能します。

私のコードは次のようである：私の意見では

import React, {Component, PropTypes} from "react"; 

import { 
    View, 
    Image, 
    Text, 
    ListView, 
    Dimensions, 
    StyleSheet, 
    TouchableOpacity, 
} from 'react-native'; 

const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}> 
     <View style={[styles.itemVTextBox, 
     isActive ? styles.activeItemVTextBox : null 
     ]}> 
     <Text style={[ 
      styles.item, 
      isActive ? styles.activeItem : null 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
); 



class MyOrder extends Component { 

    render(){ 
    return (

    ... 
    ) 
    } 
    } 

、render関数が数回実行されます。 import codeとclass defineコードの間にコードを挿入すると、コードは1回実行されます。

私の見解は正しいですか？

このユーザー定義コードを別のファイルに置く必要はありますか？ container componentで

export default const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}> 
     <View style={[styles.itemVTextBox, 
     isActive ? styles.activeItemVTextBox : null 
     ]}> 
     <Text style={[ 
      styles.item, 
      isActive ? styles.activeItem : null 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
); 

： 'filePathに' から

インポートItemView別のファイルに

。

このプラクティスは優れていますか？ボタンで

//Button.js 
import React, {Component, PropTypes} from "react"; 

import { 
    View, 
    Image, 
    Text, 
    ListView, 
    Dimensions, 
    StyleSheet, 
    TouchableOpacity, 
} from 'react-native'; 

const Button = (props) => { 
    const { title,onpress,isActive } = this.props 
    return ( 
    <TouchableOpacity onPress={onPress}> 
     <View style={[styles.itemVTextBox, 
     isActive ? styles.activeItemVTextBox : null 
     ]}> 
     <Text style={[ 
      styles.item, 
      isActive ? styles.activeItem : null 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
); 
} 

export default Button 

//Main component 

import Button from '@.../Button.js' 

class MyOrder extends Component { 

    render(){ 
    return (
    <Button title='login' isActive={false} onPress={this.loginButtonPressed()} /> 
    ... 
    ) 
    } 
    } 

：そう以下、それあなたが常に再利用可能なコンポーネント用に別のフォルダを定義した場合、それは良い練習することができ、再利用可能なコンポーネント作成のほぼすべてのコンポーネントを使用している

Answer 1

ボタンは一例です。 js、私は使用してjsxをサポートしていますネイティブの反応とそれはこのように実装するクリーンで良い練習に見えます。

乾杯：