ReactNative：使用スイッチは、アセンブリアセンブリスイッチ

I.はじめに

スイッチは、組立開口部のための0と1、オフのために0,1の相互に排他的な関係です。多くの場合、アプリケーションは、いくつかの機能を制御するために組み立てスイッチを使用します有効または無効になっています。アセンブリReactNativeは、スイッチング機能を実装するために設けられたスイッチ。

 

二、API

次のように多くのプロパティが用意されています。

// スイッチング要素の電流値は、デフォルト値は偽である 
値:. PropTypesがBOOLは

// スイッチアセンブリ対話することができる場合に 
無効:. PropTypes BOOL 

// 成分値を切り替える際に変更呼び出さ
onValueChange：PropTypes.funcを

// 一意に識別することアセンブリ切り替え 
テストIDを： 。PropTypes 文字列

// スイッチ素子の境界線の色（iOSの）は、Androidの背景色がある
tintColor：ColorPropType 

// ときに、背景色時にオープン
onTintColor：ColorPropType 

// スイッチアセンブリ前景 
thumbTintColor：ColorPropType

 

第三に、使用

単純に次のコマンドを使用します。

/ * * 
 *サンプルネイティブアプリを反応させる
 * https://github.com/facebook/react-native 
 * @flow 
 * / 

インポートから、{コンポーネント}を反応させ' 反応します' 。

インポート{ 
    AppRegistry、
    スタイルシート、
    ビュー、
    スイッチ
}から「は、ネイティブ反応します」。


エクスポートデフォルト クラスReactNativeDemoは、コンポーネント{延びている

    状態 = {値：偽}。

    レンダリング（）{ 
        リターン（
             <ビュースタイル= {[styles.flex、styles.bgColor、styles.center]}> 
                < 切り替え
                    値 = { この.state.value} 
                    無効 = { 偽} 
                    tintColor = { ' 青' } 
                    onTintColor = { ' 緑色' } 
                    thumbTintColor = { ' 茶色' } 
                    onValueChange = {（値）=> この.setState（{値：値}）}
                 /> 
            </ビュー> 
        ）。
    } 
} 

CONSTスタイル=StyleSheet.create（{  
    フレックス：{
        フレックス：1 
    } 
    はbgColor：{ 
      backgroundColorの：' 白' 
    }、
    中心：{ 
        alignItems：' 中央' 、
        justifyContent：' 中央' 、
    } 
}）。

AppRegistry.registerComponent（' ReactNativeDemo '、（）=> ReactNativeDemo）。