在Android上反應原生flexbox問題

Question

概述 我試圖在android上使用flex框一小時了，似乎無法讓它工作。所以我從反應本地網站採取了一個簡單的片段來展示我的問題。

的主要問題

exampleContainer: { flex: 1 }

將不考慮Android的屏幕空間。

圖片證明

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）一個flex樣式解決了這個問題。

Solution and Picture

Answer 1

爲了得到反應母語柔性框Android和IOS正常工作，你的根視圖必須具有適用於它，使眼前的孩子們知道有多少空間可柔性風格。