react和react2_对本机React的介绍

react和react2

To work with React Native, you will need to have an understanding of JavaScript fundamentals.

要使用React Native，您需要了解JavaScript基础。

With React, you can make components using either classes or functions. Originally, class components were the only components that could have a state. But since the introduction of React’s Hooks API, you can add state and more to function components.

使用React，您可以使用类或函数来制作组件。 最初，类组件是唯一可以具有状态的组件。 但是自从引入React的Hooks API以来，您可以向功能组件添加状态和更多内容。

入门 (Getting Started)

The easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native.

入门的最简单方法是使用Expo CLI。 Expo是围绕React Native构建的一组工具。

Make sure you have installed NodeJs and run the following command:

确保已安装NodeJ，并运行以下命令：

$ npm install -g expo-cli

To create a new project run:

要创建一个新的项目运行：

$ expo init newProject
$ cd newProject
$ npm start

This will start a development server for you.

这将为您启动开发服务器。

组件 (Components)

In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components.

在Android开发中，您可以使用Kotlin或Java编写视图； 在iOS开发中，您使用Swift或Objective-C。 使用React Native，您可以使用React组件通过JavaScript调用这些视图。

Core Components

核心组件

React Native has Core Components for everything from form controls to activity indicators. You can find them on the website of the react-native documentation.

React Native具有核心组件，可用于从表单控件到活动指示器的所有内容。 您可以在本机文档的网站上找到它们。

A few common components are:

一些常见的组件是：

• View
  视图
• Text
  文本
• Image
  图片
• ScrollView
  滚动视图
• TextInput
  文字输入

Create your first component

创建您的第一个组件

Here is how you do it: First import ‘React’ and ‘React Native’:

操作方法如下：首先导入“React”和“React本机”：

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

And you create a component like a regular javascript function:

然后创建类似于常规javascript函数的组件：

const Article = () => {};

You can add elements to these components, like text, images or inputs. Example:

您可以向这些组件添加元素，例如文本，图像或输入。 例：

const Article = () => {
  return <Text>Hello, I am an Article!</Text>;
};

To be able to use this component, you need to export it:

为了能够使用此组件，您需要将其导出：

const Article = () => {
  return <Text>Hello, I am an Article!</Text>;
};export default Article;

JSX (JSX)

React and React Native use JSX, a syntax that lets you write elements inside JavaScript. Any JavaScript expression will work between curly braces.

React和React Native使用JSX，该语法可让您在JavaScript中编写元素。 任何JavaScript表达式都可以在花括号之间使用。

For example:

例如：

const Article = () => {
  const number = 1;
  return <Text>Hello, I am an Article number {number}</Text>;
};export default Article;

道具 (Props)

Props is short for properties, these properties you can pass through components to, for example, display data.

道具是属性的缩写，这些属性可以通过组件传递，例如显示数据。

For example:

例如：

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

州 (State)

A state is like personal storage for a component. The state is useful for handling data that changes over time or that comes from user interaction. State gives your component a memory.

状态就像组件的个人存储。 状态对于处理随时间变化或来自用户交互的数据很有用。 状态为您的组件提供了记忆。

Let’s see how that works:

让我们看看它是如何工作的：

First import state:

首次导入状态：

import React, { useState } from 'react';

Then add a new variable:

然后添加一个新变量：

const Cat = (props) => { const [isHungry, setIsHungry] = useState(true);  return (
    <View>
      <Text>Hello, I am {props.name} and I am {isHungry ? "hungry" : "full"}!!</Text>
    </View>
  );
}

文字输入 (Text Input)

The ‘<TextInput>’ element will let users be able to enter text to your application. You can store the text in a state for example.

“ <TextInput>”元素将使用户能够向您的应用程序输入文本。 例如，您可以以某种状态存储文本。

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

Create your component:

创建您的组件：

const Cat = (props) => {
  const [text, setText] = useState('');
    return (      <View>
        <TextInput
          onChangeText={text => setText(text)}
        />
      </View>     );
   }

When the ‘InputText’ element changes it replaces the value of the state with the value of the element.

当'InputText'元素更改时，它将状态值替换为该元素的值。

列表视图 (List Views)

The ‘FlatList’ component displays a scrolling list of changing, but similarly structured data. ‘FlatList’ works well for long lists of data, where the number of items might change over time.

“ FlatList”组件显示变化但结构类似的数据的滚动列表。 “ FlatList”适用于较长的数据列表，其中项目数可能会随时间变化。

Here an example of the ‘FlatList’:

以下是“ FlatList”的示例：

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
}export default FlatListBasics;

结论 (Conclusion)

After this article, I hope you can write a simple React Native code now and have a good idea of what React Native is about.

在阅读完本文之后，希望您现在可以编写一个简单的React Native代码，并对React Native的内容有一个很好的了解。

翻译自: https://levelup.gitconnected.com/an-introduction-to-react-native-7a420b2346d4

react和react2