我在使用React Native/Redux开发中犯过的11个错误
在使用React Native近一年之后，使用是中犯时候分享一下我刚开始用RN开发项目时犯过的错误了。
1.错误的过的个错估计
有可能你对***个React Native(RN)应用程序的预估是完全错误的!
1)你需要分别考虑iOS和Android版本的布局!在布局的时候，有很多组件可以重复使用;如果ios和Android的使用页面结构不同，就需要对他们分开单独布局。中犯 2)对form进行评估时，过的个错***也考虑一下数据层验证。使用 3)了解数据库结构，中犯有助于正确地规划redux2.尽量使用基础组件(buttons，过的个错footers，使用headers，中犯inputs，过的个错texts)
google搜索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 FriendsAuth用于存储认证的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 ( <View style={ styles.container}> <View style={ styles.avatarBlock}> <Image source={ this.props.image} style={ styles.avatar}/> </View> <View style={ styles.form}> <View style={ styles.formItem}> <Text>Username</Text> <TextInput onChange={ this._usernameChanged.bind(this)} value={ this.state.username} /> </View> </View> <TouchableOpacity onPress={ this._submit.bind(this)}> <View style={ styles.btn}> <Text style={ styles.btnText}> Submit </Text> </View> </TouchableOpacity> </View> ); } }所有样式都存储在一个单独的模块中。
包裹在TouchableOpacity中的button组件应该单独分离出来，这样才能方便我们以后重复使用它。Image组件，以后也可能重复使用，所以也应该把它分离出来。
做了一些改变之后的样子：
import React, { Component, PropTypes } from react; import { Text, TextInput, View, TouchableOpacity } from react-native; import styles from ./styles.ios; class Avatar extends Component{ constructor(props){ super(props); } render(){ if(this.props.imgSrc){ return( <View style={ styles.avatarBlock}> <Image source={ this.props.imgSrc} style={ styles.avatar}/> </View> ) } return null; } } Avatar.propTypes = { imgSrc: PropTypes.object } class FormItem extends Component{ constructor(props){ super(props); } render(){ let title = this.props.title; return( <View style={ styles.formItem}> <Text> { title} </Text> <TextInput onChange={ this.props.onChange} value={ this.props.value} /> </View> ) } } FormItem.propTypes = { title: PropTypes.string, value: PropTypes.string, onChange: PropTypes.func.isRequired } class Button extends Component{ constructor(props){ super(props); } render(){ let title = this.props.title; return( <TouchableOpacity onPress={ this.props.onPress}> <View style={ styles.btn}> <Text style={ styles.btnText}> { title} </Text> </View> </TouchableOpacity> ) } } Button.propTypes = { title: PropTypes.string, onPress: PropTypes.func.isRequired } 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 ( <View style={ styles.container}> <Avatar imgSrc={ this.props.image} /> <View style={ styles.form}> <FormItem title={ "Username"} value={ this.state.username} onChange={ this._usernameChanged.bind(this)}/> </View> <Button title={ "Submit"} onPress={ this._submit.bind(this)}/> </View> ); } }现在的代码看起来更多了 – 因为我们为Avatar，FormItem和Button组件添加了包装器，但现在我们可以在需要的地方重复使用这些组件。我们可以将这些组件移动到单独的模块中，并导入我们需要的任何地方。我们也可以添加其他一些Props，例如style，TextStyle，onLongPress，onBlur，onFocus。而且这些组件是完全可以定制的。
注意，一定不要深度定制一个小组件， 这样会使组件过于繁琐，代码会变的很难阅读。即使现在添加新属性的想法看起来像是解决任务的最简单的方法，将来这个小小的属性在阅读代码时可能会引起困惑。
关于理想的smart/dumb组件，看一下这个：
class Button extends Component{ constructor(props){ super(props); } _setTitle(){ const { id } = this.props; switch(id){ case 0: return Submit; case 1: return Draft; case 2: return Delete; default: return Submit; } } render(){ let title = this._setTitle(); return( <TouchableOpacity onPress={ this.props.onPress}> <View style={ styles.btn}> <Text style={ styles.btnText}> { title} </Text> </View> </TouchableOpacity> ) } } Button.propTypes = { id: PropTypes.number, onPress: PropTypes.func.isRequired } export default class SomeContainer extends Component { constructor(props){ super(props); this.state = { username:null } } _submit(){ if(this.state.username){ console.log(`Hello, ${ this.state.username}!`); } else{ console.log(Please, enter username); } } render() { return ( <View style={ styles.container}> <Button id={ 0} onPress={ this._submit.bind(this)}/> </View> } }我们已经“升级”了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 }; this.opacityAnimated = new Animated.Value(0); this.panResponder = PanResponder.create({ onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, onStartShouldSetResponder:() => true, onStartShouldSetPanResponder : () => true, onMoveShouldSetPanResponder:(evt, gestureState) => true, onPanResponderMove: (e, gesture) => { }, onPanResponderGrant: (evt, gestureState) => { /**THIS EVENT IS CALLED WHEN WE PRESS THE BUTTON**/ this._setOpacity(1); this.setState({ timestamp: moment() }); this.long_press_timeout = setTimeout(() => { this.props.onLongPress(); }, 1000); }, onPanResponderStart: (e, gestureState) => { }, onPanResponderEnd: (e, gestureState) => { }, onPanResponderTerminationRequest: (evt, gestureState) => true, onPanResponderRelease: (e, gesture) => { /**THIS EVENT IS CALLED WHEN WE RELEASE THE BUTTON**/ let diff = moment().diff(moment(this.state.timestamp)); if(diff < 1000){ this.props.onPress(); } clearTimeout(this.long_press_timeout); this._setOpacity(0); this.props.releaseBtn(gesture); } }); } _setOpacity(value){ /**SETS OPACITY OF THE BUTTON**/ Animated.timing( this.opacityAnimated, { toValue: value, duration: 80, } ).start(); } render(){ let longPressHandler = this.props.onLongPress, pressHandler = this.props.onPress, image = this.props.image, opacity = this.opacityAnimated.interpolate({ inputRange: [0, 1], outputRange: [1, 0.5] }); return( <View style={ styles.btn}> <Animated.View { ...this.panResponder.panHandlers} style={ [styles.mainBtn, this.props.style, { opacity:opacity}]}> { image} </Animated.View> </View> ) } } Button.propTypes = { onLongPress: PropTypes.func, onPressOut: PropTypes.func, onPress: PropTypes.func, style: PropTypes.object, image: PropTypes.object }; Button.defaultProps = { onPressOut: ()=>{ console.log(onPressOut is not defined); }, onLongPress: ()=>{ console.log(onLongPress is not defined); }, onPress: ()=>{ console.log(onPress is not defined); }, style: { }, image: null }; const styles = { mainBtn:{ width:55, height:55, backgroundColor:rgb(255,255,255), } };首先，初始化PanResponder对象实例。它有一套不同的操作句柄。我感兴趣的是onPanResponderGrand(当用户触摸按钮时触发)和onPanResponderRelease(当用户从屏幕上移开手指时触发)两个句柄;
我还设置了一个动画对象实例，帮助我们处理动画。将其值设置为零;然后我们定义_setOpacity方法，调用时改变this.opacityAnimated的值。在渲染之前，我们插入this.opacityAnimated为正常的opacity值。我们不使用View而是使用Animated.View模块为了使用动态变化的opacity值。
通过上面的例子，你会发现Animated API不难理解，你只需要阅读相关的API文档，以确保你的应用程序***运行。希望这个例子能帮你开个好头。
在使用React Native开发时可能会遇到很多问题，希望这篇文章能帮助你避免一些错误。