React Native Manual

React Native

1. 开发环境 &&工作流程

2. 设计 && 交互

3. 性能 && 链接安全

4. JavaScript Runtime

5. 基础

从高级iOS开发人员到React初学者，再到职业生涯中首次开始编程的人。这些文档是为所有学习者编写的，无论他们的经验水平或背景如何。

要使用React Native，您需要了解JavaScript基础。可以通过 入门 或者 复习来学习Javascript .

Expo Snack 可以在线的运行 reactnative 项目在浏览器；

5.1.功能组件和类组件

使用React，您可以使用类或函数来制作组件。最初，类组件是唯一可以具有状态的组件。但是自从引入React的Hooks API以来，可以向功能组件添加状态和更多内容。
由于Hooks是编写React组件的面向未来的方式，因此下面 我们使用功能组件示例编写了此简介：

import React from ‘react‘;
import { Text, View } from ‘react-native‘;

export default function HelloWorldApp() {
  return (
    <View style={{
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

5.1.1.Core Components and Native Components

在Android和iOS开发中，视图是UI的基本组成部分：屏幕上的一个小矩形元素，可用于显示文本，图像或响应用户输入。甚至应用程序的最小视觉元素（例如一行文本或一个按钮）也都是各种视图。某些类型的视图可以包含其他视图。

• 本机组件
  在Android开发中，您可以使用Kotlin或Java编写视图；在iOS开发中，您使用Swift或Objective-C。使用React Native，您可以使用React组件通过JavaScript调用这些视图。
• ``核心组件
  React Native具有许多核心组件，从表单控件到活动指示器，应有尽有。您可以在I部分找到找到所有记录的文档。您将主要使用以下核心组件
  
  由于React Native使用与React组件相同的API结构，因此您需要了解React组件API才能上手。
  

5.2.React 基础

• components

功能组件

import React from ‘react‘;
import { Text } from ‘react-native‘;

export default function Cat() {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

类组件

import React, { Component } from ‘react‘;
import { Text } from ‘react-native‘;

export default class Cat extends Component {
  render() {
    return (
      <Text>Hello, I am your cat!</Text>
    );
  }
}

• JSX
  React文档提供了有关JSX的全面指南
• props
  props 是“属性”的缩写。props 可让您自定义React组件。

import React from ‘react‘;
import { Text, View } from ‘react-native‘;

function Cat(props) {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

export default function Cafe() {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

• state
  虽然您可以将props作为用于配置组件呈现方式的参数，但状态就像组件的个人数据存储一样。状态对于处理随时间变化或来自用户交互的数据。

import React, { Component } from "react";
import { Button, Text, View } from "react-native";

export class Cat extends Component {
  state = { isHungry: true };

  render(props) {
    return (
      <View>
        <Text>
          I am {this.props.name}, and I am
          {this.state.isHungry ? " hungry" : " full"}!
        </Text>
        <Button
          onPress={() => {
            this.setState({ isHungry: false });
          }}
          disabled={!this.state.isHungry}
          title={
            this.state.isHungry ? "Pour me some milk, please!" : "Thank you!"
          }
        />
      </View>
    );
  }
}

export default class Cafe extends Component {
  render() {
    return (
      <>
        <Cat name="Munkustrap" />
        <Cat name="Spot" />
      </>
    );
  }
}

6. Native Components and Modules

React Native Manual

原文：https://www.cnblogs.com/q1104460935/p/12891038.html