React Native Introduction and Basics - Style

Introduction to React Native and Basic 1.3 Styles

React Native components are styled using CSS-like style rules, but using JavaScript objects instead of text strings. Here is an example using styles

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;

In the above code, we defined a style object stylescalled . This object contains two style rules: containerand text. containerRules are used to define a center-aligned container, and textrules are used to define the style of text. be with element, we use the style attribute to refer to style rules.
Note that when using styles, property names are camelCased rather than hyphen-separated.

Exercise 1.3:

1. Create a component MyButtoncalled with custom styles and a onPressproperty that will print a message to the console when the button is pressed. A component's style should include at least a background color and a text color.
2. In a new component MyView, use MyView the component and render a custom text and a default MyView style in the component.

Reference answer:
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;

The above is a simple React Native component that contains an image, a text input, a button and a checkbox.

First, we StyleSheet.createcreated a stylesheet using the method. In styles, we define the style properties of each element of the component (including images, text input boxes, buttons, and check boxes).

Next, we defined a MyViewcomponent named , and used the basic components in it React Nativeto create the UI interface. Here, we import CheckBoxthe component to support the functionality of the checkbox. In MyViewthe component, we use useStatea hook to define a state variable isSelectedindicating whether the checkbox is checked or not. Then, we rendered an image, a text input, a button, and a checkbox inside the View, and bound isSelectedstate variables and setSelectedfunctions to the checkbox.

Finally, we pass the stylesheet to Viewthe component as its style property to apply the defined styles.

useState
uses useStatefunctions to allow us to conveniently manage the state of components in function components, and does not need to write this.setState()code similar to methods. It is React Hooksan important part of , so that Reactthe function component has the same state management function as the class component.