React Native 简介与基础 1.3 样式
React Native 组件的样式使用了类似于 CSS 的样式规则，但是使用的是 JavaScript 对象而不是文本字符串。以下是一个使用样式的示例
import React from 'react';
import {
StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
},
text: {
fontSize: 20,
fontWeight: 'bold',
color: '#000',
},
});
const HelloWorld = () => {
return (
<View style={
styles.container}>
<Text style={
styles.text}>Hello, World!</Text>
</View>
);
};
export default HelloWorld;
上述代码中，我们定义了一个名为 styles 的样式对象。该对象包含了两个样式规则：container 和 text。container 规则用于定义一个居中对齐的容器，text 规则用于定义文本的样式。在 和
注意，在使用样式时，属性名称使用驼峰命名法而不是连字符分隔。
练习题1.3：
- 创建一个名为
MyButton的组件，该组件具有自定义样式和一个onPress属性，当按下按钮时，将在控制台中输出一条消息。组件的样式应至少包含背景颜色和文本颜色。 - 在一个新的组件
MyView中，使用MyView组件，并在该组件中呈现一个自定义文本和一个默认的MyView样式。
参考答案：
1.
import React from 'react';
import {
StyleSheet, TouchableOpacity, Text } from 'react-native';
const MyButton = ({
onPress, label }) => {
return (
<TouchableOpacity style={
styles.button} onPress={
onPress}>
<Text style={
styles.label}>{
label}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
backgroundColor: '#4CAF50',
padding: 10,
borderRadius: 5,
},
label: {
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
},
});
export default MyButton;
import React, {
useState} from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TextInput,
} from 'react-native';
import CheckBox from '@react-native-community/checkbox';
const MyView = () => {
const [isSelected, setSelected] = useState(false);
return (
<View style={
styles.container}>
{
/* 添加一张图片 */}
<Image
source={
{
uri: 'https://reactnative.dev/img/tiny_logo.png'}}
style={
styles.image}
/>
{
/* 添加一个文本输入框 */}
<TextInput style={
styles.textInput} placeholder="请输入文本" />
{
/* 添加一个按钮 */}
<TouchableOpacity style={
styles.button}>
<Text style={
styles.buttonText}>确定</Text>
</TouchableOpacity>
{
/* 添加一个复选框 */}
<View style={
styles.checkBoxContainer}>
<CheckBox value={
isSelected} onValueChange={
setSelected} />
<Text style={
styles.checkBoxLabel}>我已阅读并同意条款</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: 50,
height: 50,
marginBottom: 20,
},
textInput: {
borderWidth: 1,
borderColor: '#999',
borderRadius: 4,
paddingVertical: 8,
paddingHorizontal: 12,
marginBottom: 20,
width: '80%',
},
button: {
backgroundColor: 'blue',
borderRadius: 4,
paddingVertical: 10,
paddingHorizontal: 20,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
},
checkBoxContainer: {
flexDirection: 'row',
alignItems: 'center',
},
checkBoxLabel: {
marginLeft: 8,
},
});
export default MyView;
上面是一个简单的React Native组件，其中包含了一个图片、一个文本输入框、一个按钮和一个复选框。
首先，我们使用StyleSheet.create方法创建了一个样式表。在样式中，我们定义了组件的各个元素（包括图片、文本输入框、按钮和复选框）的样式属性。
接着，我们定义了一个名为MyView的组件，并在其中使用了React Native的基本组件来创建UI界面。在这里，我们导入了CheckBox组件，以支持复选框的功能。在MyView组件中，我们使用useState钩子来定义一个状态变量isSelected，表示该复选框是否被选中。然后，我们在View内部渲染了一个图片、一个文本输入框、一个按钮和一个复选框，并将isSelected状态变量和setSelected函数绑定到了复选框上。
最后，我们将样式表作为组件的样式属性传递给View组件，以应用所定义的样式。
useState
使用useState函数可以让我们在函数组件中方便地管理组件的状态，并且不需要编写类似this.setState()方法的代码。它是React Hooks的重要组成部分，使得React函数组件具有了与类组件一样的状态管理功能。