ReactNative技术点汇集

一、Image、ScrollView、Text、View组件样式集参考

非常常用的style样式集链接

二、Text文本单行显示

多的部分….来省略

//'head'->"...wxyz";'middle'->"ab...yz";'tail'->"abcd...";'clip'->
<Text
    ellipsizeMode="tail"   
    numberOfLines={1}
> {'xxxxx...'} 
</Text>

三、获取屏幕长宽

const { height, width } = Dimensions.get('window');

四、不同平台显示不同样式

input: {
   margin: 8,
   ...Platform.select({
     ios: {
       paddingTop: 20
     },
     android: {
       paddingTop: 0
     }
   })
 },

五、不同平台选择不同组件

const Component = Platform.select({
    ios : ()=> <ComponentIOS />,
    android : ()=> <ComponentAndroid />
})();

<Component />

六、不同条件显示不同样式

// 1、三元条件运算符
<View style={[styles.base , isTrue ? {} : {}]}></View>

// 2、布尔值并的方式
<View style={[styles.base , isTrue && styles.active]}></View>

七、不同平台运行不同的代码

• 1、安卓平台命名为 xxx.android.js
• 2、IOS平台命名为 xxx.ios.js

使用import xxx from './xxx'; ，不同手机平台自动运行该平台代码

八、react native保存图片到手机

• 1、Link xxxProject/node_modules/React-native/Libraries/CameraRoll
  [参考官网link librarys]https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content
• 2、保存代码

// 导入
import { CameraRoll } from 'react-native';

// 保存图片代码
CameraRoll.saveToCameraRoll('http://facebook.github.io/react/img/logo_og.png');

九、IOS上TextInput输入框启动键盘后点击空白地方关闭键盘

• 1、给TextInput添加属性：keyboardShouldPersistTaps={false}
• 2、在iOS上点击输入框会打开键盘，点击空白处，键盘就会自动关闭

十、获取设备像素比&最小线宽

StyleSheet.hairlineWidth //这一常量始终是一个整数的像素值(线看起来会像头发丝一样细)

十一、往上轮播

1、往上ScrollView

<ScrollView
    ref={_scrollView => this.scrollView = _scrollView}
    showsVerticalScrollIndicator={false}
        >
...
...

2、轮播变换Y轴

componentDidMount() {
    this.ticking = setInterval(() => {
      if (this.state.offsetY > 50) {
        this.scrollView.scrollTo({ x: 0, y: 0, animated: true });
        this.setState({ offsetY: 0 });
      } else {
        this.setState({ offsetY: this.state.offsetY + 50 });
        this.scrollView.scrollTo({ x: 0, y: this.state.offsetY, animated: true });
      }
    }, 1200);
  }

00、React Native性能优化点

• 1、shouldComponentUpdate 的生命周期函数中判断是否要重新渲染，可以利用辅助工具immutable.js
  组件生命周期
• 2、ListView优化相关属性
  
  • a、initialListSize 首次渲染绘制行数
  • b、pageSize 决定每一帧渲染的行数
  • c、scrollRenderAheadDistance 延迟渲染的距离
  • d、removeClippedSubviews 移除超出屏幕的子视图
• 2、navigator路由跳转优化
  
  • a、优先执行动画(切屏动画)，执行结束后再执行复杂逻辑

componentDidMount() {
   InteractionManager.runAfterInteractions(() => {
     this.fetchData(); // to do
   });
}

• 3、点击态响应慢；
  // 将复杂操作延迟到下一帧来执行

handleOnPress() {
    // 谨记使用requestAnimationFrame、setTimeout及setInterval时，
    // 要使用TimerMinxin(其作用是在unmount组件时，清楚所有定时器)
    this.requestAnimationFrame(() => {
        this.fetchData(); // to do
    })
}

• 其他优化点
  
  • a、关闭开发模式
  • b、去掉不必要的Require
  • c、减少View的层次
  • d、 去掉console.log
  • e、适当使用动画

11、其他最佳实践优化

1、rn首屏最佳实践