CSS 在React Native中使视图的宽度占父容器的80%

在本文中，我们将介绍如何在React Native中利用CSS使视图的宽度占父容器的80%。CSS是一种用于定义网页样式的标记语言，我们可以通过CSS来设置React Native中的视图样式。

阅读更多：CSS 教程

了解React Native的布局

在开始之前，我们需要了解React Native的布局系统。React Native使用Flexbox布局，这是一种用于web和移动端开发的流式布局模型。在Flexbox中，我们可以使用flex属性来控制父容器中子元素的大小和位置。

使用CSS设置宽度

要使视图的宽度占父容器的80%，我们可以使用CSS中的百分比单位。下面是一个简单的示例：

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.child}></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f0f0f0',
  },
  child: {
    width: '80%',
    height: 200,
    backgroundColor: 'red',
  },
});

export default App;

在上面的示例中，我们使用CSS设置了子视图的宽度为父容器宽度的80%。通过将子视图的样式属性width设置为'80%'，我们可以使其宽度占父容器的80%。此外，我们还设置了子视图的高度为200，并将背景颜色设置为红色。

在React Native中使用百分比单位

在React Native中，我们可以使用百分比单位设置视图的宽度和高度。与web开发中使用CSS相似，React Native也支持使用百分比单位来定义元素的大小。

我们可以使用以下百分比单位来设置宽度和高度：

%：相对于父容器的百分比值。
vw：相对于视窗宽度的百分比值。
vh：相对于视窗高度的百分比值。

以下是一些示例：

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

const {width, height} = Dimensions.get('window');

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.child}></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f0f0f0',
  },
  child: {
    width: '80%',
    height: `${height * 0.2}`,
    backgroundColor: 'red',
  },
});

export default App;

在上述示例中，我们使用了Dimensions模块来获取屏幕的宽度和高度，然后使用百分比单位来设置子视图的高度。通过将子视图的样式属性height设置为${height * 0.2}，我们可以使子视图的高度占屏幕高度的20%。