Androidでネイティブフレックスボックスの問題に反応する

Question

概要 私は1時間のアンドロイドでフレックスボックスを使用しようとしましたが、動作させるように見えませんでした。だから私は自分の問題を実証するために、反応ネイティブサイトから簡単なスニペットを取った。

主な問題

exampleContainer: { flex: 1 }

アンドロイド画面のスペースを考慮しています。

ピクチャー証明

ios vs Android

コードスニペット

export default class App extends Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     environment: props.environment, 
 
     message: `Environment: ${props.environment}` 
 
    } 
 
    } 
 

 
    static defaultProps() { 
 
    return {environment: "Unknown"} 
 
    } 
 

 
    render(){ 
 
    return (
 
      // Try setting `alignItems` to 'flex-start' 
 
      // Try setting `justifyContent` to `flex-end`. 
 
      // Try setting `flexDirection` to `row`. 
 
      <View style={{ 
 
      flex: 1, 
 
      alignSelf: 'stretch', 
 
      flexDirection: 'column', 
 
      justifyContent: 'center', 
 
      alignItems: 'center' 
 
      }}> 
 
      <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> 
 
      <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> 
 
      <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> 
 
      </View> 
 
     ); 
 
    } 
 
}

UPDATE ルートノード（./index..js）にフレックススタイルを指定することで、この問題を解決しました。

Solution and Picture

Answer 1

AndroidとiOSの両方に対して適切に動作反応し、ネイティブフレックスボックスを取得するには、直接の子は、スペースが提供されていますどのくらい知っているように、あなたのルートビューは、それに適用されるフレックススタイルを持っている必要があります。