React 样式与隔离

Posted 2023-03-09

参考技术A 使用 style= ,如

不同于vue的scoped，react引入的样式未进行模块化处理，因此均为全局样式，需要自行隔离

导入css名改为 .module.css 结尾

对于 create-react-app 创建的应用，直接 npm install --save node-sass 即可在组件中引用scss，无需更改webpack配置

React Native 简介与基础-样式

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 规则用于定义文本的样式。在 和 元素中，我们使用了 style 属性来引用样式规则。
注意，在使用样式时，属性名称使用驼峰命名法而不是连字符分隔。

练习题1.3：

1. 创建一个名为 MyButton 的组件，该组件具有自定义样式和一个 onPress 属性，当按下按钮时，将在控制台中输出一条消息。组件的样式应至少包含背景颜色和文本颜色。
2. 在一个新的组件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函数组件具有了与类组件一样的状态管理功能。