ReactNative：使用ステータスバーステータスバー

I.はじめに

UIStatusBarのiOSアプリのステータスバーを変更制御に使用することができる、同じように、リアクト - ネイティブステータスバーには、コンポーネントを制御するために使用することができます。

二、API

属性：

// 非表示にするかどうかを 
隠さ？：ブール、

// サポートアニメーションにするかどうかを 
アニメーション？：ブールは、

// 背景色を設定し、アンドロイドの使用制限 
のbackgroundColorを？：$ FlowFixMe、

// 透明かどうか 
半透明の？：ブール、

// ステータスバースタイルのデフォルト、白、黒 
barStyle：？「デフォルト」 | 「ライト・コンテンツ」 | 「ダークコンテンツ」、

// ネットワークインジケータのiOSのみを使用して表示するかどうかを 
networkActivityIndicatorVisibleを？：ブール、

// 設定隠されたアニメーションの 
？showHideTransition：「フェード」 |「スライド」、

方法：

// ステータスバーの非表示にするには、静的メソッド
静的 setHidden（隠された：ブール、アニメーション？：StatusBarAnimation）

// 静的メソッド、設定されたステータスバーのスタイルの
静的の SetBarStyle（スタイル：StatusBarStyle、アニメーション？ブール：）

// ネットワークインジケータを設定する静的メソッドを、 、IOSののみ使用
スタティック：setNetworkActivityIndicatorVisible（ブール可視）

// 静的メソッド、背景色を設定し、アンドリュースのみ使用
静的 setBackgroundColorを（色：文字列、アニメーション？：ブール）

// の透明度を設定するための静的メソッド
静的ブール：setTranslucent（半透明）

第三に、使用

設定を使用します

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

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

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


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

    コンストラクタ（小道具）{ 
        スーパー（小道具）。
        この .state = { 
            ショー：真
        } 
    } 

    // ステータスバーの初期化
    componentWillMountを（）{ 

        @ 「ライト・コンテンツ」|デフォルト・モード：ホワイトモード|「ダークコンテンツ」：デフォルトブラックモード、ホワイトモード「デフォルト」 
        StatusBar.setBarStyle（「ライト-コンテンツ」、真の）; 

        // ネットワークインジケータ表示 
        StatusBar.setNetworkActivityIndicatorVisible（trueにする）; 

        // 皮アニメーションモードを'フェード' | 'スライド'： 
        StatusBar.showHideTransition = ' スライド' ; 
    } 

    showHideStatusBar（）{ 
        この .setState（{ ！：表示本）} .state.showを、
        ステータスバー。setHidden（この .state.show、真の）; 
    } 

    （）{レンダリング
        リターン（
             <ビュースタイル= {[styles.flex、styles.bgColor、styles.center]}> 
                <TouchableHighlightたonPress = { この .showHideStatusBar.bind（本）}> 
                    <テキスト>点击显示或者隐藏状态栏</テキスト> 
                </ TouchableHighlight> 
            </ビュー> 
        ）; 
    } 
} 

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

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

プロパティの設定を使用して、

/ * * 
 *サンプルネイティブアプリを反応させる
 * https://github.com/facebook/react-native 
 * @flow 
 * / 
インポートから、{コンポーネント}を反応させ' 反応します' 。

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


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

    レンダリング（）{ 
        リターン（
             <ビュースタイル= {[styles.flex、styles.bgColor、styles.center]}> 
                <ステータスバーアニメーション= { 真 }
                           隠れ = { 偽} 
                           のbackgroundColor = { ' 青' } 
                           透光 = { 真} 
                           barStyle = { ' 光含量' } 
                           showHideTransition = { ' フェード' } 
                           networkActivityIndicatorVisible = { 真}
                 /> 
            </ビュー> 
        ）。
    } 
} 

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

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

ReactNative：使用ステータスバーステータスバー

おすすめ