RN研究ノート（1）ビューコンポーネント

ビューコンポーネント

コンセプト

あなたが最も基本的なUIコンポーネントを作成すると、ほとんどのコンポーネントは、プロパティは、コンポーネントを表示継承します。ビューはサポートフレキシボックスのレイアウト、スタイルコンテナ、タッチ処理の一部、および一部のユーザー補助機能です。副ビューの複数の任意のタイプとすることができる他のビューに配置することができます。どんなプラットフォームで、ビューは直接それはUIViewの、div要素またはandroid.view.Viewであるかどうか、プラットフォームのネイティブの図に対応しません。

以下は、2つのビューが含まれているビューを作成します

class ViewDemo extends Component {
  render(){
    return(
      <View style={{
        flexDirection:'row',
        height:100,
        padding:20
      }}>
        <View style={{backgroundColor:'red' flex: 0.3}}/>
        <View style={{backgroundColor:'blue' flex: 0.5}}/>
        <Text></Text>
      </View>
    )
  }
}
复制代码

ビューは、スタイルシートで使用するために設計され、これはコードより明確にし、より高い性能であります

共通のプロパティ

1.styleプロパティ

次のように表示するスタイルのスタイルプロパティセットは、様々な特性を提供することができます

1.1フレキシボックスプロパティ

ビューのレイアウト・コンポーネントは、フレキシボックスをサポート

1.2シャドウプロパティ

IOS矛盾の上に影を電話でアンドリュースの設定、iOSのはshadowプロパティ、Androidの利用の高度を使用しますが、効果は十分ではありません、反応し、ネイティブの影を、サードパーティのライブラリを使用することをお勧めします

1.2.1shadow関連（iOS版）

次のように表示するコンポーネントは、4つのシャドウのプロパティが用意されています。

色：shadowColorは、影の色の値を設定します
shadowOffsetシャドウは変位値を設定：{幅：数、高さ：数}
番号：shadowOpacityは影の不透明度の値を設定します
shadowRadius設定シャドウぼかし半径値：番号**注：**影のプロパティのセットビューコンポーネントは意味がありません、その構成要素は、この効果を達成するために、それぞれを継承できるようにするために、Viewコンポーネントでこれらのプロパティを定義します。shadowプロパティを使用することができるだけのiOSプラットフォーム

1.2.2上昇する（Android）

標高値の数。Androidプラットフォームは、セットをシャドウする影ではありませんが、標高プロパティの影によって間接的に設定することができます。これは、ページのシャドウ効果に現れるアセンブリの高さを設定するためにネイティブのAndroid標高APIを使用して、この効果は唯一のAndroid 5.0以上をサポートしています

1.3国境関連

境界線のスタイルのborderStyleのborderStyle三つの値、固体（実施ボーダー）、点線（点線枠）、破線（点線の境界線）
BORDERCOLOR境界線の色はborderTopColor、borderRightColor、borderBottomColor、borderLeftColor、文字列の値に細分化することができます
borderRadius境界フィレットはborderRadius、borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadius、に細分することができる背面の左および右、前方にトップとボトム数の値、

注意：

あなたがborderRadiusを設定しない場合、のborderStyleの点線と破線の値は失敗します。

1.4変換

4つのタイプに値を変換し、（傾き）スキュー、、、スケール（ズーム）（翻訳）変換（回転）を回転させます。回転差を傾斜、回転させながらスキューが傾斜角度で変化させながら、それは、コンポーネント自体の形態を変更しない回転、コンポーネントが対応する変化を形成することになります。transformプロパティの効果を持つビューコンポーネントは、ほとんどのコンポーネントはのtransformプロパティのビューを継承し、非常に明白ではありません。

1.5オーバーフロー（IOS）

オーバーフロー値は、サブアセンブリは、幅と高さの表示要素上幅とビューコンポーネントの挙動の高さを定義するために使用される場合、デフォルト値、すなわち、隠れた部分を越えて、隠され、隠され、visableあります。oveflowのみのiOSプラットフォームでオーバーフローが、提示または隠された効果Androidプラットフォームでvisableであったとしても、有効です。

1.6のbackgroundColor

背景色を設定し、デフォルトは非常に明るい灰色で、唯一のテキストとのTextInputが親コンポーネントの背景色を継承する、他のコンポーネントは、独自の背景色を設定する必要があります。

1.7不透明度

0は完全に透明成分を意味する0から1の不透明度値は、1であり、完全に不透明成分を表します。

2.タッチイベントのコールバック関数

3.removeClippedSubviews

4.アニメ関連

参考リンク

2. 1.公式文書劉王ジュさんのブログ|ネイティブコンポーネント（B）の表示コンポーネントが解析さに反応

ます。https：//juejin.im/post/5cfdb93fe51d45772a49ad0dで再現