我们曾经“晋级”了Button组件。用一个叫做“id”的新属性来交流属性“title”。如今Button组件就变的“灵敏”了。传0 – button组件会显示“submit”。传2 – 显示“delete”。但这能够会有一些成绩。

Button被创立为一个dumb组件 – 只是为了显示数据，传递数据这件事由它的更高一级的组件来完成。

假设我们将5作为id传递给这个组件，我们就需求更新组件，以便让它顺应这个改动。dumb组件，就是细分的小组件，它只需接纳props就好了，假设有state也应该与全局的有关。

7.行内样式

在运用RN规划之后，我遇到了行内样式的写作作风成绩。相似这样：

render() {     

    return (         

        <View style={{flex:1, flexDirection:'row', backgroundColor:'transparent'}}> 

            <Button 

                title={"Submit"} 

                onPress={this._submit.bind(this)}/> 

        </View> 

    ); 

} 

当你这样写的时分，你会想：“暂时这样写，等我在模拟器中运转之后 – 假设规划没成绩，再把样式移动到独自的模块。”也许这是一个好的想法。但是..不幸的是，你往往会选择性疏忽行内样式…

一定要在独立的模块中编写样式，远离行内样式。

8.运用redux验证表单

要运用redux来验证表单，我需求在reducer中创立action，actionType独自的字段，这样做很费事。

所以我决议只借助state来完成验证。没有reducers,types等等，只是在container级别上的纯功用函数。从action和reducer文件中删除不必要的函数，这个策略对我协助很大。

9.过于依赖zIndex

很多人从web开发转到RN开发。在web中有一个css属性z-index，它可以协助我们在需求的层级显示我们想要的内容。

在RN中，一末尾没有这样的特性。但后来又被添加出去了。后来，运用起来还挺复杂的。只需为元素设置zIndex属性，它就会按照任何你想要的图层顺序来渲染。但是在Android上测试之后…如今我只用zIndex来设置展现层的结构。

10.不细心阅读外部组件的源码

你可以引入外部组件来节省你的开发时间。

但有时这个模块能够会中缀，或许不像描画的那样任务。阅读源码你才会明白哪里出现了错误。也许这个模块本身就有成绩，或许你只是用错了。另外 – 假设你细心阅读其他模块的源码，你将会学习到如何构建本人的组件。

11.要小心手势操作和Animated API。

RN为我们提供了构建完全原生运用顺序的才能。怎样让用户觉得是原生运用?页面规划，滑入手势，还是展现动画?

当你运用View，Text，TextInput和其他RN提供的默许模块时，手势和动画应该由PanResponder和Animated API来处置。

假设你是从web转过去的rn开发工程师，获取用户的手势操作能够会有些困难，你需求区分什么时分末尾，什么时分完毕，长按，短按。你能够还不够清楚怎样在RN中模拟这些动画操作。

这是我用PanResponder和Animated树立的Button组件。这个button是为了捕捉用户手势而构建的。例如 – 用户按下项目，然后将手指拖到一边。在按下按钮时，借助于动画API，构建button按压下的不透明度的变化：

'use strict'; 

import React, { Component, PropTypes } from 'react'; 

import { Animated, View, PanResponder, Easing } from 'react-native'; 

import moment from 'moment'; 

export default class Button extends Component { 

    constructor(props){ 

        super(props);                 

        this.state = { 

            timestamp: 0 

        };         

(责任编辑：admin)