react native css
时间: 2023-08-19 20:04:22 浏览: 57
React Native 使用类似于 CSS 的样式语法来定义组件的样式。你可以使用内联样式对象,也可以使用外部样式表文件来管理样式。
1. 内联样式:在组件的 `style` 属性中直接定义样式对象,例如:
```jsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const MyComponent = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
fontWeight: 'bold',
color: 'blue',
},
});
export default MyComponent;
```
2. 外部样式表:将样式定义在外部的样式表文件中,然后在组件中引入使用,例如:
```jsx
// styles.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
fontWeight: 'bold',
color: 'blue',
},
});
export default styles;
// MyComponent.js
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
const MyComponent = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
};
export default MyComponent;
```
以上是一些基本的示例,你可以在样式对象中设置各种属性,例如字体大小、颜色、布局等。还可以使用 `StyleSheet` 提供的一些辅助函数,比如 `create` 来创建样式表、`flatten` 来合并多个样式对象等。具体的样式属性和特性可以参考 React Native 的官方文档。