ReactNative：使用セグメンテーションコンポーネントアセンブリSegmentedControlIOS

I.はじめに

iOS版で UISegmentControl 制御をセグメント化し、ビューにフィルタを設定することができますか、ハンドオーバ制御を更新します。同様に、ReactNative互換IOSプラットフォームでSegmentedControlIOS成分を提供します。その使用量は、ほぼ、今見ています。

二、API

SegmentedControlIOSアセンブリの両方の特性を提供するだけでなく、利用可能な機能を提供します。例としては、次のとおりです：

// 細分ボタンコントロールをコピーライティングタグは、アレイアレンジ 
値：PropTypes.arrayOf（PropTypes 文字列）、

// 選択されたボタンのラベルコントロールの特定のセグメント
PropTypes.number ,: selectedIndexの

// ユーザーがボタンをクリックすると細分コールをコールバック、パラメータとして渡されたセグメント値
onValueChange：PropTypes.func、

// ユーザーがボタンを細分化コールバックをクリックしたときに呼び出され、パラメータとして渡されたイベント
のonChange：PropTypes.funcは、

// コンポーネントがクリックできるかどうか、デフォルトではtrueにある 
有効化] ：。PropTypes BOOL 、

// 色成分を強調し、[このプロパティが作業は、色が死んで固定されていない理由を私は知らない] 
tintColor :. PropTypes 文字列は、

// trueの場合、細分化を選択することになるではない最後の長いビジョンで。期待通り`onValueChange`コールバックが動作します。回復するにチェックをクリックインスタント、 
モメンタリ:. PropTypes BOOLを

デフォルトの内部構成要素の高さは、例えば、28個の画素をSegmentedControlIOS。

// デフォルト高 
VARのスタイル= StyleSheet.create（{ 
  segmentedControl：{ 
    高さ：28 、
  } 
}）。

第三に、使用

今、例えば、単にそれを使用します。

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

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

インポート{ 
    AppRegistry、
    スタイルシート、
    ビュー、
    SegmentedControlIOS 
から} 「反応ネイティブ」。


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

    状態 = {selectedIndexの：2 }。

    （）レンダリング{ 
        リターン（
             <ビュースタイル= {[styles.flex、styles.bgColor、styles.center]}> 
                < SegmentedControlIOS 
                    スタイル = {{幅：300、高さ：50 }} 
                    の値 = {[ " 语文"、" 数学"、" 英语"、" 物理"、" 化学" ]} 
                    のselectedIndex = { この.state.selectedIndex} 
                    onValueChange = {（値）=> {にconsole.log（' 値：' + 値）}} 
                    のonChange = {（イベント）=>{ 
    }、この .setState（{selectedIndexの：イベント.nativeEvent.selectedSegmentIndex}）。}} 
                    イネーブル = { 真} 
                    tintColor = { ' ＃1 fa0a0f ' } 
                    瞬時 = { 偽}
                 /> 
            </ビュー> 
        ）。
    } 
} 

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

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

2020年までに - 01 - 04  16：08：00.228 [INFO] [TID：com.facebook.react.JavaScript]値：数学
 2020年までに - 01 - 04  16：08：01.491 [INFO] [TID：com.facebook.react.JavaScript ]値：英语
 2020年までに - 01 - 04  16：08：01.960 [INFO] [TID：com.facebook.react.JavaScript]値：物理
 2020年までに - 01 - 04  16：08：02.621[情報] [TID：com.facebook.react.JavaScript]値：化学
 2020年までに - 01 - 04  16：08：03.441 [INFO] [TID：com.facebook.react.JavaScript]値：语文

ReactNative：使用セグメンテーションコンポーネントアセンブリSegmentedControlIOS

おすすめ