在运用React Native近一年之后，是时分分享一下我刚末尾用RN开发项目时犯过的错误了。

1.错误的估量

有能够你对第一个React Native(RN)运用顺序的预估是完全错误的!

1)你需求辨别思索iOS和Android版本的规划!在规划的时分，有很多组件可以重复运用;假设ios和Android的页面结构不同，就需求对他们分开独自规划。

2)对form停止评价时，最好也思索一下数据层验证。

3)了解数据库结构，有助于正确地规划redux

2.尽量运用基础组件(buttons，footers，headers，inputs，texts)

谷歌搜索RN的基础组件，你会发现有很多现有组件可以方便的用到项目中，如buttons，footers等。假设项目中没有特别的规划设计，只需求运用这些基础组件就可以构建一个页面。假设有一些特殊的设计，例如，特殊的button样式，你就需求为每个按钮设置自定义样式。你可以封装曾经构建好的组件，并为它们定制样式。但是我觉得运用View，Text，TouchableOpacity和RN的其他组件来构建本人的组件愈加有意义。由于你会有更多的rn实际，并且深入了解如何运用RN。最重要的一点，你可以确定你本人构建的组件版本不会被改动。

3.不要把iOS和Android的规划分开

假设iOS和Android规划大致一样，只要一小部分不同，你可以复杂地运用RN提供的Platform API依据设备平台停止区分。

假设规划完全不同 – 最好分散在不同的文件中独自规划。

假设你给一个文件命名为index.ios.js – 顺序打包时，在iOS中将运用这个文件显示iOS规划。 index.android.js也是一样的道理。

你能够会问：“代码怎样复用呢?” 你可以将重复的代码移动到助手函数中。需求的时分只复用这些助手函数。

4.错误的redux store规划。

初学者常常会犯的一个很大的错误就是，当你在规划你的运用顺序时，你能够会思索很多规划相关的成绩，却很少思索关于数据的处置。

Redux可以协助我们正确地存储数据。假设redux规划的好 – 它将是管理运用顺序数据的弱小工具。

当我刚刚末尾构建RN运用顺序时，我曾思索将reducers作为每个container的数据存储。所以，假设你有登录，遗忘密码，待办事项列表页面 – 运用他们的缩写比较复杂：SignIn, Forgot, ToDoList.

在停止了一段任务后，我发现管理数据没有想象中的容易。

当我从ToDo列表中选择项目时 – 我需求将数据传递给ToDoDetails reducer。这意味着运用了额外的操作来发送数据到reducer。

在做了一些调查之后，我决议以不同的方式规划结构。一个例子：

Auth

Todos

Friends

Auth用于存储认证的token。

而ToDos和Friends reducers用于存储实体，当我去ToDo Detail页面时 – 我只需求经过ID搜索一切的ToDos。

关于更复杂的结构，我引荐运用这种规划，你可以快速的定位到你想找到的。

5.错误的项目结构

作为初学者时，总是规划不好项目结构。

首先 ，需求剖析你的项目是不是足够大?

你的运用顺序中有多少个页面? 20?30?10?5?还是只要一个”Hello World”页面?

我遇到并末尾实施的第一个结构是这样的：

假设你的项目不超过10个页面，运用下面这种结构是没有成绩的。但是假设项目特别大 – 你可以思索这样规划结构：

区别在于，第一种类型建议我们将actions和reducers与container分开存储。第二种- 把它们存储在一同。假设运用顺序很小 – 将redux模块从container中别离出来会愈加有用。

假设你有通用的样式(如Header、Footer、Buttons) – 你可以单首创立一个名为“styles”的文件夹，在那里设置一个index.js文件并在其中写入通用样式。然后在每个页面上重复运用它们。

实践项目中会有很多不同的结构。你应该了解运用哪种结构更适宜你的需求。

6.错误的container结构。没有从一末尾就运用smart/dumb组件

当你末尾运用RN并初始化项目时，index.ios.js文件中曾经有一些代码，存储在一个独自的对象中。

在实践开发项目中，你将需求运用很多组件，不只仅是由RN提供的，还有本人构建的一些组件。构建container时，可以重用它们。

思索该组件：

import React, { Component } from ‘react’; 

import { 

   Text, 

   TextInput, 

   View, 

   TouchableOpacity 

} from ‘react-native’; 

import styles from ‘./styles.ios’; 

 

export default class SomeContainer extends Component { 

   constructor(props){ 

       super(props);        

       this.state = { 

           username:null 

       } 

   } 

   _usernameChanged(event){        

       this.setState({ 

           username:event.nativeEvent.text 

       }); 

    } 

   _submit(){        

       if(this.state.username){            

           console.log(`Hello, ${this.state.username}!`); 

       }        

       else{            

           console.log(‘Please, enter username’); 

       } 

    } 

                

    render() {         

      return (             

(责任编辑：admin)