css - RN疑问，为什么我的container没有铺满全屏？

问题描述

问 题

RN疑问，为什么我的container没有铺满全屏？
子内容没有垂直居中。

 render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native For Web!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.web.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload
        </Text>
          <Text style={styles.instructions}>
         I am damiaozi
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  logo: {
    alignSelf: 'center',
    marginBottom: 10
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  },
  touchable: {
    backgroundColor: '#CAE6FE'
  }
});

package.json文件内容如下：

    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.4.0",
    "react-dom": "^15.4.0",
    "react-native": "^0.41.0",
    "react-native-web": "0.0.103",
    "webpack": "^2.6.1"

最终没有铺满全屏和居中效果图：

我这是哪里错了吗？

解决方案

你的代码没有问题，请使用真机，浏览器中的页面高度默认是内容高度，只有手动height:100%才会铺满。

这篇关于css - RN疑问，为什么我的container没有铺满全屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！