介绍
在使用 React Native 时,默认情况下它不使用 HTML 和 CSS 作为 Web 应用程序。
事实上,就在盒子之外,一切都根据 Flexbox自动定型。
在本文中,您将介绍如何将样式应用于 React Native 应用程序。
前提条件
如果您想跟随这篇文章,您将需要:
- 熟悉使用 CSS 属性和值
- 熟悉使用 React Native 中的 JSX 语法
使用风格
关于 React Native 设计的第一件事是使用StyleSheet组件。
首先,将其导入如下:
1import { StyleSheet } from 'react-native';
之后,你可以这样使用它:
1const styles = StyleSheet.create({
2 container: {
3 height: 100
4 }
5})
然后,添加它来适当地格式化您的组件,如下:
1<View style={styles.container}></View>
您还可以使用内线路线,如下:
1<View style={{height: 100}}></View>
这个代码会产生相同的结果。
处理Pixel
你可能已经注意到我们在高度: 100中没有指明任何单位为100。你可能被用来写px,vm,等等。
对于iOS来说,它们是逻辑点,而Android使用DIP。背后有很多推理,以及为什么选择这个逻辑。在同一个屏幕尺寸上有许多不同的屏幕尺寸和不同分辨率。所以如果我们使用正常像素,它会在一些手机上看起来像素化;但点背后的想法是让事情在像素密集、高分辨率的屏幕上看起来相对相同,就像在低分辨率的屏幕上一样。
虽然它不是完美的,但它将看起来大致相同,从一个平台到另一个平台. 有一个计算,在场景后面进行,以确定你的高度,宽度,边界宽度,等等,在屏幕上看起来像什么。
您也可以使用自动或百分比,但您可以将其包装在引文中,如下:
1<View style={{ height: '100%' }}></View>
此代码将产生一个完整的高度视图。
覆盖整个屏幕
现在,关于设置一个<View>来填充整个屏幕的一件事是,像iPhone X这样的手机有屏幕的一部分被用户界面(UI)覆盖,通常,您放置的屏幕的一部分将隐藏在屏幕的覆盖部分下。
为此,使用 React Native 组件<SafeAreaView>将其余的组件包裹起来,你可以确定你会看到你的整个屏幕。
或者,您可以使用flex: 1。
React Native 默认使用 Flexbox,因此您不必担心应用显示:灵活。而与 Web 版本中默认设置flexDirection为row不同,React Native 使用flexDirection设置为列。
这两种方法都将确保内容仍然可见。
添加 Margin 和 Padding
在网络上,你可以使用边缘和折叠的缩写。
然而,React Native 有额外的样式辅助器来应用边缘和垫。
例如,要给一个元素一个20的顶部和底部边缘,你可以这样设置:
1<View style={{marginVertical: 20}}></View>
你也可以把它放在顶部和底部:
1<View style={{paddingVertical: 20}}></View>
除了垂直的助手外,还有横向的助手: paddingHorizontal 和 marginHorizontal。
还有开始和结束你可以标记在边缘和垫尾的尽头. 每当你看到开始和结束的风格,你可以知道这些取决于容器的flexDirection
如果flexDirection是row,那么marginStart会表现为marginLeft。
如果flexDirection是row-reverse,那么marginStart会像marginRight一样行事。
另外,请记住,开始和结束是MarginLeft和marginRight,paddingLeft和paddingRight。
添加阴影和边界
CSS 中正常的边界风格在 React Native 风格中不可用,你必须将其分为边界色和边界宽度。
你可以选择每个个别的半径与顶部开始,顶部结束,底部开始,或底部结束,如下:边界TopStartRadius: 20,或者你可以使用更简单的左上,右上,等等。
最后,您可以使用borderStyle来从划分,点缀或固体边界中选择。
至于React Native中的影子,你不会使用你可能熟悉的盒子影子。
相反,React Native 具有仅在 iOS 上工作的风格:
1shadowOffset: { height: 3, width: 3 },
2shadowColor: '#000000',
3shadowOpacity: 0.5,
4shadowRadius: 5
在旧版本的Android,没有一个伟大的,内置的解决方案与React Native. 你可以设置升高属性,但这不是可自定义的,不会与其他风格 - 如边界和背景颜色 - 很好地工作。
解决平台之间的差异
在最后一节中,我们看到了平台之间的第一个主要差异:一个有阴影风格,但另一个没有。现在好事是,在上面的例子中,Android将简单地忽略它不支持的风格。
然而,你会发现外观上的差异很大,从一个平台到另一个平台,即使是完美的,干净的风格。
为了在平台上保持类似的风格,让我们从 React Native 中导入平台组件。
1import { View, StyleSheet, Platform } from 'react-native';
2
3{/* ... */}
4<View style={styles.container}></View>
5{/* ... */}
6
7const styles = StyleSheet.create({
8 container: {
9 height: Platform.OS === 'android' ? 100 : 20,
10 backgroundColor: Platform.OS === 'ios' ? 'yellow' : 'blue',
11 ...Platform.select({ ios: { width: 100 } })
12 }
13})
请注意在这里设置平台特定的风格的两种不同的方式,一种方法是使用三级操作员的风格支持之后:
1height: Platform.OS === 'ios' ? 100, 20
这在大多数情况下都很好,但如果你甚至不想在一个平台上设置一个风格,怎么办?这就是...Platform.select()的入口。
1...Platform.select({ ios { width: 100 }, android: { width: 75 } })
此代码将为 iOS 平台定义宽度为100,对于 Android 平台定义宽度为75。
结论
在本文中,您介绍了如何将样式应用于 React Native 应用程序。
在 React Native 中,您会注意到风格因组件而异,而不是在 Web 中,基本上每个元素都可以使用每个风格。
在 官方的 React Native 文件中,用于文本组件的风格支撑程序中,它没有在网络上可用的所有属性的全部宽度,而一些组件,如 Button,甚至没有风格支撑程序。
您也可以使用(https://andsky.com/tech/tutorials/react-react-native-basic-components)`等组件,当然还有,这些组件具有大多数可用的样式化特性,也可以导入样式化组件`库并使用正常的CSS。