RN：フレックスボックスを使用したセンタースピナー？

Question

私は縦と横を中心としたスピナー（iosとアンドロイド - 現在iosでテスト中）として取得しようとしています。ここに私のJSXもちろんの

  <View> 
       <Spinner/> 
      </View> 

で、スピナーは単にActivityIndi​​cator

const Spinner = ({size}) => { 
    return (
     <View style={styles.spinnerStyle}> 
      <ActivityIndicator/> 
     </View> 

    ); 
}; 


const styles = { 
    spinnerStyle: { 
     flex: 1, 
     justifyContent : 'center', 
     alignItems: 'center' 
    } 
} 
export {Spinner} 

スピナー作品が、そのは常に画面の上部に、スピナーが含まれているが含まれてこれをあるカスタムコンポーネントであります私が思うはフレキシブルなアイテムもあります。しかし、それは..私はまた、カスタムコンポーネント、すなわちを保持する第1のビューのいくつかのスタイルを追加試していない

  <View style={....}> 
       <Spinner/> 
      </View> 

しかし、喜びを行います。

誰でも手助けできますか？

Answer 1

あなたはほとんどそこにいると思います！欠けているのは、flex: 1を<Spinner />コンポーネントの周りの<View>に設定することだけです。

Expo's Sketchに例を作成しました。それを見て気軽に。 flex: 1を削除し、背景色を追加して動作を確認してください。それが役に立てば幸い！

import React, { Component } from 'react'; 
import { View, StyleSheet, ActivityIndicator } from 'react-native'; 

const spinnerStyles = StyleSheet.create({ 
    spinnerStyle: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
}); 

class Spinner extends Component { 
    render() { 
    return (
     <View style={spinnerStyles.spinnerStyle}> 
     <ActivityIndicator size="small" /> 
     </View> 
    ); 
    } 
} 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Spinner /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    // backgroundColor: '#4286f4', 
    }, 
});