开发常用三方库

组件的 defaultProps

通用style

react-redux + class + hooks

moxb + hooks

FlatList + HOC (封装) 或者自定义一个FlatList组件

图片模块管理

网络请求类 + loading + toast

打开APP，判断进入登录页面还是首页

发布时取消log

bind this（使用hooks就不需要bind）

多使用自定义hook

图片压缩tinypng（https://www.jianshu.com/p/48d28de69fee）

• 开发常用三方库

• 视频压缩 https://www.jianshu.com/p/7b708a281234
• 图片选择 react-native-image-crop-picker react-native-image-picker
• 图片缩放 react-native-image-zoom-viewer
• 加密 crypto-js
• 多语言 i18n-js
• 相机 react-native-camera
• 获取视频缩略图 react-native-create-thumbnail
• 本地存储 react-native-fs
• 热更新重启app react-native-restart
• 方法调用组件 react-native-root-siblings
• 语音 react-native-sound
• 视频播放 react-native-video
• 解压 react-native-zip-archive
• 页面截屏 react-native-view-shot
• 颜色渐变 react-native-linear-gradient
• 设备信息 react-native-device-info
• 启动页 react-native-splash-screen
• react-redux 搭配 redux-persist
• mobx 搭配 mobx-state-tree

• 组件的 defaultProps

一些通用的组件属性可以使用defaultProps声明

const oldRender = Text.render;
Text.render = function (...args) {
    const origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [defaultFontFamily, origin.props.style,{includeFontPadding:false}]
    });
};
Text.defaultProps = Object.assign({}, Text.defaultProps, {allowFontScaling: false,suppressHighlighting:true});

const oldTouch = TouchableOpacity.render;
TouchableOpacity.render = function (...args) {
    const origin = oldTouch.call(this,...args);
    return React.cloneElement(origin,{
        activeOpacity:0.8
    })
}
const oldTextInput = TextInput.render;
TextInput.render = function (...args) {
    const origin = oldTextInput.call(this,...args);
    return React.cloneElement(origin,{
        padding:0
    })
}
const oldScrollView = ScrollView.render;
ScrollView.render = function (...args) {
    const origin = oldScrollView.call(this,...args);
    return React.cloneElement(origin,{
        showsHorizontalScrollIndicator:false,
        showsVerticalScrollIndicator:false,
        keyboardDismissMode:'interactive'
    })
}
//refreshcontrol loading颜色
RefreshControl.defaultProps = {...RefreshControl.defaultProps, tintColor:Colour.color_F27405,
    colors:[Colour.color_F27405]};
Modal.defaultProps = {...Modal.defaultProps,transparent:true,animationType:'fade'};
FlatList.defaultProps = {
    ...ScrollView.defaultProps,ListEmptyComponent:<EmptyComponent></EmptyComponent>,
    keyExtractor:(item, index) => 'item_'+index,
}

• 通用style

一个app应当统一。比如统一的标题、副标题、分割线等。 建一个通用的style.js，声明统一的style。 比如 主色调，文字的大小、颜色，row，between等，具体的间隔等在具体的页面声明即可

• react-redux + class + hooks

主界面使用class（方便使用react-redux），里面的组件使用hooks

• moxb + hooks

�详细地址：https://www.jianshu.com/p/b618986bc27e

• FlatList + HOC (封装) 或者自定义一个FlatList组件

FlatList使用频繁且代码重复较多，主要是renderItem不同，可以使用HOC传入renderItem。如果接口同意的话，可以传入一个网络请求promise，内部实现 （返回结果key不一样的话可以传入key）

• 图片模块管理

图片分模块进行管理，每一个模块一个文件夹，存放图片及image.js。在js文件中声明图片

export default {
    banner_1:require('./banner_1.png')
}

• 网络请求类 + loading + toast

可以使用react-native-root-siblings 将loading和toast方法式调用，和网络请求类封装到一起

• 打开APP，判断进入登录页面还是首页

具体代码 https://www.jianshu.com/p/40235aa95dd8
设置一个过渡页面，程序打开进入过渡页面，在过渡页面判断是否登录，然后reset到相应的页面。过渡页面可以设置为启动页的样式

• 发布环境取消log

if (!__dev__) {
      global.console = {
            info: () => {},
            log: () => {},
            warn: () => {},
            debug: () => {},
            error: () => {},
        };
    }

• bind this

ES5 使用 React.createClass()方法用于生成一个组件类，自动绑定this
ES6 使用class Contacts extends React.Component，需要手动绑定this

• 多使用自定义hook

/**
 * 获取信息
 */
 export function useInfo(id:number): any {
  const [info, setInfo] = useState({});
  useEffect(async() => {
     const infoRes= await getInfoFromHttp(id)
     setInfo({info :infoRes})
  }, [依赖参数])
  return info;
}

...持续更新...