参考官网
一、在组件中使用 style 样式
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
return (
1. style 属性的值可以是对象
2. style 属性的值可以是数组，当属性相同时，后面的属性覆盖前面的属性
3. 展开并合并多个样式为一个数组 {JSON.stringify(composeStyle)}
4. 展开并合并多个样式为一个对象 {JSON.stringify(flattenStyle)}
5. 1px 宽度
);
};
// 创建样式引用
const styles = StyleSheet.create({
container: {
backgroundColor: '#ccc',
height: '100%',
},
content: {
backgroundColor: 'green',
padding: 20,
},
color_: {
color: '#fff',
backgroundColor: 'orange',
},
fontSize_: {
fontSize: 20,
},
borderBottom: {
padding: 20,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: 'red',
},
});
const stylesOther = StyleSheet.create({
bg: {
backgroundColor: 'red',
},
mg: {
marginTop: 20,
},
});
// 组合
const composeStyle = StyleSheet.compose([
styles.content,
styles.fontSize_,
stylesOther.bg,
stylesOther.mg,
]);
// 展开
const flattenStyle = StyleSheet.flatten([
styles.content,
styles.fontSize_,
stylesOther.bg,
stylesOther.mg,
]);
export default App;
二、 在组件中使用 Flexbox 布局
- 在 react-native 中的弹性布局 和 web 的弹性布局使用上略有不同
/* 在 react-native 中 */
1. flexDirection的默认值为column（而不是row）
2. alignContent默认值为 flex-start（而不是 stretch）
3. flexShrink 默认值为0 （而不是1）
4. flex只能指定一个数字值
5. 使用时无需给容器设置 display: flex;
- 在组件中使用
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
return (
hello world
hello world
hello world
hello world
hello world
hello world
);
};
const styles = StyleSheet.create({
// 包裹器
container: {
backgroundColor: '#236788',
flex: 1,
padding: 20,
},
// 纵向默认
header: {
backgroundColor: 'red',
flex: 1,
msg: {
color: '#fff',
},
},
// 横向 - 水平垂直居中
footer: {
backgroundColor: 'green',
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
msg: {
color: 'yellow',
},
},
});
export default App;
三、 react-native 独有样式属性和注意事项
- 定位 position 属性的值只有:absolute 和 relative，无 static 和 fixed
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
return (
左
右
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: '#236788',
height: 200,
width: 200,
position: 'relative',
},
positionLeft: {
width: 50,
height: 50,
backgroundColor: 'green',
position: 'absolute',
left: 50,
top: 50,
zIndex: 1001, // 设置层级
},
positionRight: {
width: 50,
height: 50,
backgroundColor: 'red',
position: 'absolute',
left: 80,
top: 50,
},
});
export default App;
- margin 外边距，margin只能设置一个值，代表上下左右边距
{marginHorizontal: 20} 水平左右边距，{marginVertical: 20} 垂直上下边距
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
return (
外边距水平垂直
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: '#236788',
height: 200,
width: 200,
margin: 20,
},
matginCenter: {
width: 100,
height: 100,
backgroundColor: 'red',
marginHorizontal: 50, // 水平左右外边距
marginVertical: 50, // 垂直上下外边距
},
});
export default App;
- padding 内边距，padding只能设置一个值，代表上下左右边距，
{paddingHorizontal: 20} 水平左右边距，{paddingVertical: 20} 垂直上下边距
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
return (
内边距水平垂直
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: '#236788',
height: 200,
width: 200,
padding: 45,
},
paddingCenter: {
width: 100,
height: 100,
backgroundColor: 'red',
paddingHorizontal: 10, // 水平左右内边距
paddingVertical: 10, // 垂直上下内边距
},
});
export default App;
- ncludeFontPadding 属性，在 Android 中，使用{textAlignVertical:center}设置文字垂直居中时默认情况下文字偏上，需要将ncludeFontPadding设置为false
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
return (
内边距水平垂直
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: '#236788',
height: 200,
width: 200,
},
center: {
width: 200,
height: 100,
backgroundColor: 'red',
color: '#fff',
textAlign: 'center', // 水平居中
textAlignVertical: 'center', // 垂直居中
includeFontPadding: false, // android 水平垂直居中
},
});
export default App;
- 背景图片，在react-native中没有 backgroundImage 这个属性，所以无法通过style设置背景图片
需要通过 ImageBackground 组件实现背景图片
import React from 'react';
import {StyleSheet, Text, View, ImageBackground} from 'react-native';
const App = () => {
return (
hello world
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
titleWrapper: {
flex: 0.2,
backgroundColor: 'rgba(120,14,20,0.2)',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 28,
color: '#fff',
},
});
export default App;