在Android上反应原生flexbox问题

问题描述：

概述我试图在android上使用flex框一小时了，似乎无法让它工作。所以我从反应本地网站采取了一个简单的片段来展示我的问题。在Android上反应原生flexbox问题

的主要问题

exampleContainer: { flex: 1 }

将不考虑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

答

为了得到反应母语柔性框Android和IOS正常工作，你的根视图必须具有适用于它，使眼前的孩子们知道有多少空间可柔性风格。

在Android上反应原生flexbox问题

相关推荐