Basic code structure in React Native
React Native中的基本代码结构
React Native ArchitectureReact本机架构React Native Lifecycle
React本机生命周期
Create a React Native Application: To-do App
创建一个React Native应用程序：待办事项
React Native with Redux
使用Redux响应本机
▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬▬▬▬✦✦✦▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Earlier, native apps needed to be developed separately for different platforms such as using Java or Kotlin for Android, and C or C++ or Swift for iOS. A developer need to be aware of all the tech stack (or languages) involved in platform-specific application development.
早先，需要针对不同的平台分别开发本机应用程序，例如使用Java或Kotlin用于Android ，以及使用C或C ++或Swift用于iOS 。 开发人员需要了解特定于平台的应用程序开发中涉及的所有技术堆栈(或语言)。
Then came React Native. Facebook released the first version of React Native in March 2015. React Native applications are real mobile applications and not just web applets. Now a days, React Native is the most popular framework for developing cross-platform mobile (native) applications.
然后是React Native。 Facebook在2015年3月发布了第一个版本的ReactNative。ReactNative应用程序是真正的移动应用程序，而不仅仅是Web applet。 如今，React Native是用于开发跨平台移动(本机)应用程序的最受欢迎的框架。
Introduction of React Native has solved the complete above process. How ?
React Native的引入解决了上述完整过程。 怎么样 ？
This framework has made it possible to create native mobile apps for multiple platforms (for iOS and Android) simultaneously.
该框架使得有可能创造多个平台(iOS和Android)，同时原生移动应用。
You can develop full-blown mobile applications for both iOS and Android using a single language, i.e., JavaScript.
您可以使用一种语言(即JavaScript)为iOS和Android开发成熟的移动应用程序。
This is a huge advantage, as it saves a lot of time and money and also eliminates the steep learning curves that are associated with each platform’s native development language (Java or Kotlin for Android, and C or C++ for iOS). 这是一个巨大的优势，因为它节省了大量时间和金钱，并且消除了与每个平台的本机开发语言(Android的Java或Kotlin以及iOS的C或C ++)相关的陡峭学习曲线。One of the most significant advantages of React Native is that you can develop an application for both Android and iOS ecosystems simultaneously by writing the same code with just a few modifications for each platform.
React Native最显着的优点之一是，您可以通过编写相同的代码，并对每个平台进行少量修改，同时开发适用于Android和iOS生态系统的应用程序。
There is no need to know the languages used for platform-specific application development, as React Native uses only JavaScript, probably the most popular programming language right now, for the development of mobile applications.
无需知道用于特定平台的应用程序开发的语言，因为React Native仅使用JavaScript(可能是目前最流行的编程语言)来开发移动应用程序。
React Native enables speedy development of mobile applications since a similar code is used for applications for both platforms. It also facilitates a hot reloading feature that makes sure that small changes done to the application are immediately visible to the developer.
由于两个平台的应用程序都使用类似的代码，因此React Native可以快速开发移动应用程序。 它还促进了热重载功能，该功能确保开发人员可以立即看到对应用程序所做的微小更改。
A huge developers’ community ensures that all the queries are resolved in time, and therefore, adequate support is available for the React Native framework.
庞大的开发人员社区可确保及时解决所有查询，因此可为React Native框架提供足够的支持。
The community, as mentioned above, also keeps updating React Native with new functionalities and making sure that bugs do not occur.
如上所述，该社区还不断使用新功能更新React Native，并确保不会发生错误。
Though the framework is relatively new, many companies have already migrated the applications to this framework. Additional companies are looking to use the framework to speed up the process of development and maintenance.
尽管该框架相对较新，但许多公司已经将应用程序迁移到该框架。 其他公司正在寻求使用该框架来加快开发和维护过程。
React Native has become very popular lately due to advantages like cross-compatibility. Consequently, this popularity has led to high demand for React Native developers.
由于具有交叉兼容性等优势，React Native最近变得非常流行。 因此，这种流行导致对React Native开发人员的高需求。
There are other frameworks which allows the developers to build mobile apps using JavaScript, then what’s so special about React Native? All the other frameworks render the app in a web view which doesn’t at all give native like feel where as React native renders the native views itself.
还有其他框架允许开发人员使用JavaScript构建移动应用程序，那么React Native有什么特别之处？ 所有其他框架都在Web视图中呈现该应用程序，这完全没有给人以原生感觉，而React native本身呈现了原生视图。
It’s very natural to think that in react native, the code we write in javascript is directly converted to corresponding native languages, but it’s NOT. As native languages swift, objective C for IOS and java for android are strongly typed but javascript is not. But in real, for each view in native which needs to be rendered, there’s a corresponding component in react native. For example react native has TextInput component for UITextView in IOS and TextView in android. So when we write code for TextInput component in javaScript, the corresponding views gets rendered from native.
很自然地认为在react native中，我们用javascript编写的代码会直接转换为相应的本地语言，但事实并非如此。 随着本地语言的Swift发展，针对IOS的目标C和针对Android的Java被强类型化，而javascript不是。 但是实际上，对于需要渲染的每个本机视图，react native中都有一个相应的组件。 例如，react native具有IOS中的UITextView和android中的TextView的TextInput组件。 因此，当我们在javaScript中为TextInput组件编写代码时，相应的视图将从native呈现。
React Native platform has three parts. The first one is Native Modules, i.e iOS and Android native modules which are already known to us.
React Native平台包括三个部分。 第一个是本机模块，即我们已经知道的iOS和Android本机模块。
The second one is JavaScript VM, it is where the JavaScript code runs. All iOS and android devices use JavaScript core, which is the engine used to run the JS code. In iOS devices, react native uses the engine provided by the IOS platform itself where as for android devices, JSCore is bundled along with the app.
第二个是JavaScript VM ，它是运行JavaScript代码的位置。 所有iOS和android设备都使用JavaScript核心，这是用于运行JS代码的引擎。 在iOS设备中，react native使用IOS平台本身提供的引擎，对于android设备，JSCore与该应用程序捆绑在一起。
The third is the RN bridge, through which the communication between native and react native happens by message passing.
第三个是RN桥，通过它通过消息传递进行本机和本机之间的通信。
Main Thread: This is the thread which gets spawned when the application is started. It starts the JS thread to execute the JS code while the main thread listens to any touch, scroll events. The JS thread sends instructions of what views are to be rendered now, in the form of messages through RN bridge.
主线程：这是启动应用程序时产生的线程。 它启动JS线程以执行JS代码，而主线程则侦听任何触摸，滚动事件。 JS线程通过RN桥以消息的形式发送有关现在要呈现哪些视图的指令。
JavaScript Thread: This the place where the actual JS logical code, like API calls etc gets executed.
JavaScript Thread：这是执行实际JS逻辑代码(如API调用等)的地方。
Advantages:
好处：
Cross platform development with single set of code, there’s no absolute need to learn multiple languages. 使用单一代码集进行跨平台开发，无需绝对学习多种语言。 Build time in native is a sure pain. Hot reloading provided by react native saves the dev’s time for quicker development of features. 用本地语言构建时间肯定是痛苦的。 react native提供的热重装节省了开发人员更快地开发功能的时间。 Highly customisable in user’s perspective, for suppose if the app is developed using react native and the app has some 5 features. The users of the app can choose the features only which they want out of the available 5 features. Which is a plus point in terms of saving the space on mobile. 从用户角度高度可定制，假设应用程序是使用react native开发的，并且该应用程序具有5个功能。 应用程序的用户可以从可用的5种功能中仅选择他们想要的功能。 就节省移动空间而言，这是一个优势。Disadvantages:
缺点：
Not all native corresponding components are available in react native. Although there are external libraries which are developed but some of them doesn’t serve the whole purpose.
并非所有本机对应组件都可以在react native中使用。 尽管有一些外部库正在开发中，但是其中一些并不能满足整个目的。
The main thing is that the developer community is small and isn’t evolved enough. 最主要的是，开发人员社区很小，而且发展不够。 The app size increases by a significant amount because of JSCore engine in android app. 由于android应用程序中的JSCore引擎，因此应用程序大小显着增加。 Due to bridge communication through messages back and forth, some fast events like scroll can sometimes cause blank screen. 由于通过来回消息进行桥接通信，某些快速事件(例如滚动)有时会导致黑屏。There are both advantages and disadvantages in significant amount. Depending on the app requirements we have to choose whether to use react native or not.
有很多优点和缺点。 根据应用程序要求，我们必须选择是否使用本机响应。
Constructor: This is the place where the state of the component is initialised. This is the only place where we can set the state directly like this without the setState function.
构造函数：这是初始化组件状态的地方。 这是我们无需setState函数即可直接设置状态的唯一地方。
this.state = { value: initialState };
this.state = { value: initialState };
ComponentWillMount: This method is called only once at the start for a component before render. It’s safe here to change the state of the component.
ComponentWillMount：在渲染之前，组件的开头仅调用一次此方法。 在这里更改组件的状态是安全的。
Unlike web, if we navigate from view A to B, view A doesn’t get unmounted. It stays mounted in the back, so when navigated back from B to A, this method doesn’t get called again.
与网络不同，如果我们从视图A导航到视图B，则视图A不会被卸载。 它保持安装在后面，因此当从B导航回A时，不会再次调用此方法。
So, how to know whether view A is actively visible or not? We can’t rely on componentWillMount for obvious above reasons. To achieve this, we have to register for didFocus, willFocus, didBlur and willBlur events like this.
那么，如何知道视图A是否处于主动可见状态？ 由于上述明显的原因，我们不能依赖componentWillMount。 为此，我们必须注册didFocus ， willFocus ， didBlur和willBlur事件。
Render: This is where the component renders with the assigned state. Its not safe to setState here, as it triggers render again and which will lead to an infinite loop.
渲染：这是组件以指定状态渲染的位置。 在这里setState不安全，因为它将再次触发渲染，这将导致无限循环。
ComponentDidMount: This method is called after completing render only for the first time. Here we can alter the state as render gets called right after this if there’s any state change.
ComponentDidMount：仅在第一次完成渲染后调用此方法。 在这里，我们可以更改状态，因为如果状态发生任何变化，此后将立即调用渲染。
If there’s any update in props/state further, the lifecycle will be like this.
如果道具/状态进一步更新，则生命周期将是这样。
componentWillReceiveProps: This is called only when there’s change in props passed from parent so that we can re-render.
componentWillReceiveProps：仅当从父级传递的道具发生更改时才调用此方法，以便我们可以重新渲染。
shouldComponentUpdate: This method can be used to avoid unwanted re-renders for better performance. So, based on the received new props, we can decide whether to update the component or not.
shouldComponentUpdate：此方法可用于避免不必要的重新渲染以提高性能。 因此，根据收到的新道具，我们可以决定是否更新组件。
componentWillUpdate: This is called when the the above method returns true. We should not call setState here.
componentWillUpdate：当上述方法返回true时，将调用此方法。 我们不应该在这里调用setState。
componentDidUpdate: This is called after the re-render, again its not safe to change the state here as it leads to infinite loop. If necessary then state can be updated by putting a proper condition.
componentDidUpdate ：在重新渲染之后调用此方法，再次在这里更改状态并不安全，因为它会导致无限循环。 如有必要，可以通过放置适当的条件来更新状态。
At last componentWillUnmount is called before un-mounting the component. This is where we can unregister all listeners, call disposers etc.
最后，在卸载组件之前调用componentWillUnmount。 在这里我们可以注销所有侦听器，呼叫处理程序等。
We are going to make our mobile application, and we will call it To-do. This application will allow us to add and manage tasks in the application. In this tutorial, we will focus on running the app in Android OS, so the code is optimised accordingly. We recommend using an Android mobile for this tutorial.
我们将制作我们的移动应用程序，并将其称为“待办事项”。 该应用程序将使我们能够在应用程序中添加和管理任务。 在本教程中，我们将专注于在Android OS上运行该应用程序，因此对代码进行了相应的优化。 我们建议本教程使用Android手机。
Our final mobile application will look like this. Let’s get started!
我们最终的移动应用程序将如下所示。 让我们开始吧！
“Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript codebase.” — Expo documentation
“ Expo是通用React应用程序的框架和平台。 它是基于React Native和本机平台构建的一组工具和服务，可帮助您在同一JavaScript代码库的iOS，Android和Web应用程序上开发，构建，部署和快速迭代。” —博览会文件
Navigate to https://expo.io/learn. We will use the Expo framework to develop our React Native application. There you will find all the instructions you need to start creating.
导航至https://expo.io/learn 。 我们将使用Expo框架来开发React Native应用程序。 在这里，您将找到开始创建所需的所有说明。
The first step is not relevant in our case; so let’s skip it and directly start with Step 02, which is to install nodeJS on the computer. 第一步与我们的情况无关； 因此，让我们跳过它，直接从步骤02开始，该步骤将在计算机上安装nodeJS。 After nodeJS is installed, we need to follow Step 03 and get the command-line tool for Expo; for that, type the following command in the command prompt or terminal 安装nodeJS之后，我们需要执行步骤03，并获得Expo的命令行工具； 为此，请在命令提示符或终端中键入以下命令 npm install Expo-cli — global After the Expo-cli tool is installed, we need to follow Step 04 and create our project. To do that, type the following command in the command prompt or terminal. 安装Expo-cli工具后，我们需要执行步骤04并创建我们的项目。 为此，请在命令提示符或终端中键入以下命令。 expo init todo-appNext, choose blank from this screen for a blank application while including Expo workflow features.
接下来，从该屏幕为空白应用程序选择空白，同时包括Expo工作流功能。
Enter the name of your application, and press Enter to continue setting up the application.
输入应用程序的名称，然后按Enter继续设置应用程序。
To start the application, you can navigate to the newly created project folder and type “npm start.” To stop the application, press Ctrl + C. 要启动该应用程序，您可以导航到新创建的项目文件夹，然后键入“ npm start”。 要停止应用程序，请按Ctrl +C。 cd todo-appnpm startThe development server will start running, and a new tab will open in your web browser with the Expo manager screen.
开发服务器将开始运行，并且将在您的Web浏览器中通过Expo Manager屏幕打开一个新选项卡。
There are two ways you can now preview the application:
现在，您可以通过两种方式预览应用程序：
You can either run the app on an Android emulator, which you can get by installing Android Studio on the computer.
您可以在Android模拟器上运行该应用程序，方法是在计算机上安装Android Studio 。
Or, you can install the Expo application on your phone and scan the QR code to run the application on the phone. The To-do app will load and will update as you make changes in the code.
或者，您可以在手机上安装Expo应用程序，然后扫描QR码以在手机上运行该应用程序。 当您在代码中进行更改时，待办事项应用程序将加载并更新。
Install a text editor of your choice. We are using the Visual Studio Code in this tutorial. Still, you can also use other editors like Atom and Sublime Text if you are more comfortable with those.
安装您选择的文本编辑器。 在本教程中，我们将使用Visual Studio Code 。 不过，如果您更喜欢Atom和Sublime Text，则可以使用它们。
Now, we have all the tools we need to create a new React Native application. We have already created one, the To-do app. So let’s get started by creating the components of our mobile application.
现在，我们拥有创建新的React Native应用程序所需的所有工具。 我们已经创建了一个待办事项应用程序。 因此，让我们开始创建移动应用程序的组件。
Similar to React, everything here is a component. Everything you see here is a separate component that has been combined to create a complete mobile application. The following are the components that we will be creating for this application:
与React类似，这里的所有内容都是组件。 您在此处看到的所有内容都是一个单独的组件，已经组合在一起以创建完整的移动应用程序。 以下是我们将为此应用程序创建的组件：
App 应用程式 This component will act as a container for all the other components to come together and provide a complete application该组件将充当所有其他组件结合在一起的容器，并提供完整的应用程序Header标头As the name suggests, this component will be the header of the mobile application顾名思义，该组件将成为移动应用程序的标题Display Image显示图片This component is used here to display the image on the main screen此组件用于在主屏幕上显示图像To-do Item待办事项Each task added is a separate component添加的每个任务都是一个单独的组件To-do Input待办事项输入This component is used to add tasks to the application该组件用于向应用程序添加任务It is very important to visualize a React Native application in terms of components before starting to work on it, and that’s precisely what we are doing here.
在开始对React Native应用程序进行组件可视化之前，这非常重要，这正是我们在这里所做的。
We have completed the development of our To-do mobile application, and it should be working as illustrated below. Let’s go ahead and summarize all that we have done to create this mobile application.
我们已经完成了To-do移动应用程序的开发，并且应按以下说明工作。 让我们继续总结一下创建此移动应用程序所做的所有工作。
Install the Expo app on the mobile device to preview the application in real-time.
在移动设备上安装Expo应用程序以实时预览应用程序。
Visualize the application in terms of components and then maintain the project structure accordingly in the text editor 根据组件可视化应用程序，然后在文本编辑器中相应地维护项目结构 Add all the components to the project将所有组件添加到项目中Make sure each component works as expected确保每个组件都能按预期工作Enjoy the result and feel free to tweak the design and functionality as you want享受结果，并随意调整设计和功能for further read on …
进一步阅读……
We have now created a fully functional mobile application using React Native that works and looks great! We hope you were able to follow all of the instructions easily and can sit back and bask in your accomplishment!
现在，我们已经使用React Native创建了一个功能完备的移动应用程序，该应用程序运行良好并且看起来很棒！ 我们希望您能够轻松地按照所有说明进行操作，并可以放松身心并取得成就！
翻译自: https://medium.com/@anil.pace7/concepts-of-react-native-part-2-f429b8c2129a
