RN 经验

每天一点点 1

1. 创建指定版本

react-native init demo --version 0.55.4 指定版本

2. 跨页面传值

• DeviceEventEmitter事件传值 <类似通知>

// 引入
import {
    ...
     DeviceEventEmitter
 } form 'react-native';

//发送事件的页面
 DeviceEventEmitter.emit('userNameDidChange', '传值');

//需要接收事件的页面 
componentDidMount() {
     this.subscription = DeviceEventEmitter.addListener('userNameDidChange',(userName) =>{
          alert(userName);
     })
}

//页面卸载  移除事件
componentWillUnmount() {
    this.subscription.remove();
}

3. import 导入的几种方式

1. import Home from './src/Home';
   导入‘src/Home’文件里export的带default关键字的组件，即默认组件

2.import { Home,Me } from './src/Home';
导入‘src/Home’文件里export的叫Home和Me的非默认组件，可以导入多个组件，用逗号隔开即可

3.import * as Home from'./src/Home';
意思是将./src/Home'文件里的所有非默认组件，全部集结成一个Home模型组件，命名可以自定义，然后可以通过点语法，来使用组件里面的所有export的组件, 如 Home.A 、Home.B

4. 调用打电话功能

Linking提供了一个通用的接口来与传入和传出的App链接进行交互，比如跳转外部链接，打电话，发邮件，打开某个浏览器链接等

//导入Linking
import {
  ...
  Linking
} from "react-native";

...
call(){
  let url = 'tel: ' + '电话号码';
  //let url = "mqqwpa://im/chat?chat_type=wpa&uin=QQ号";//调用QQ
  Linking.canOpenURL(url).then(supported => {
      if (!supported) {
        console.log('Can\'t handle url: ' + url);
      } else {
        Linking.openURL(url);
      }
  }).catch(err => console.error('An error occurred', err));
}

5. 复制到剪贴板

//导入Clipboard
import {
  ...
  Clipboard
} from "react-native";

//复制电话号码到剪贴板
    async _setClipboardContent(tel){
        Clipboard.setString(tel);
        try {
            var content = await Clipboard.getString();
            console.log('复制的手机号：');
            this.clearClose();
            console.log(content);
            
        } catch (e) {
            console.log(e.message)
        }
    }

6. react-navigation 隐藏/显示tabBar

const Tab = TabNavigator(
    {
        Home: {
            screen: HomeScreen,
             /*  TabBar是否显示/隐藏    */
             navigationOptions: ({ navigation }) => {
                // console.log('nav state:', navigation.state);
                 const homeRoute = navigation.state.params;
                 return {
                     /**
                      * 控制tabBar是否显示/隐藏 
                      * 在HomeScreen 页面通过 this.props.navigation.setParams({ tabBarVisible: false/true })控制--
                      */
                     tabBarVisible: homeRoute && homeRoute.tabBarVisible, 
                 }
             }
        },
        ....
    },
    {
        ....
    }

7. 获取Navigator的层级

var currentRoute = this.props.navigator.getCurrentRoutes(); 
for(var i = 0 ; i <currentRoute.length ; i ++){
    if (currentRoute[i].name == '你想跳转的页面'){
        this.props.navigator.popToRoute(currentRoute[i]);
    }
}

8. ImageBackground 的圆角在 style 里设置没用 需要用imageStyle

<ImageBackground style={styles.image}  imageStyle={{borderRadius:10}} />

9. 使得任何一个React组件支持动画。

Animated.createAnimatedComponent(Component: any)可以使任何一个React组件支持动画。 默认支持的Animated.Image，Animated.ScrollView，Animated.Text，Animated.View。

Animated FlatList需使用ref属性时 加入以下代码：

   <Animated.FlatList
       ref={(ref) => { this._listRef = ref}}
       ...
   /> 

   //使用方法
   this._listRef.getNode().scrollToOffset({y:0})

10. view 三角冒泡框

        // 设置上下越小，三角就越尖
          <View style={{
              width: 0,
              height: 0,
              borderTopWidth: 7,
              borderTopColor: 'transparent',
              borderRightWidth: 10,
              borderRightColor: 'red',
              borderLeftWidth: 10,
              borderLeftColor: 'transparent',
              borderBottomWidth: 7,
              borderBottomColor: 'transparent',
           }} />

11. android环境下gif没有动画，不支持gif图

解决：
在android/app/build.gradle中的dependencies字段中添加：
compile 'com.facebook.fresco:fresco:1.5.0'
compile 'com.facebook.fresco:animated-gif:1.5.0'

12. 性能调试及优化

开发模式 (dev=true)

有个小技巧可以在发布时屏蔽掉所有的console.*调用。React Native中有一个全局变量__DEV__用于指示当前运行环境是否是开发环境。我们可以据此在正式环境中替换掉系统原先的console实现。

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

_DEV_=true即开发模式下，JavaScript线程的性能是很糟糕的，因为有许多工作需要在运行的时候去做，譬如使你获得良好的警告和错误信息，又比如验证属性类型（propTypes）以及产生各种其他的警告。

13. 使用webview加载html乱码问题

  <WebView 
      ...
      source={{uri:this.state.html, baseUrl:''}}   // baseUrl:'' 中文乱码解决
  />

14. 字体不随系统字体设置改变而改变

方法一：

  const {fontScale} = Dimensions.get('screen');
  fontSize: 20*(1.0/fontScale)

方法二：

import { Text, TextInput } from 'react-native'

TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {defaultProps: false});
Text.defaultProps = Object.assign({}, Text.defaultProps, {allowFontScaling: false});

15. xcode10.1 0.55.4-0.56 'config.h' file not found

error:Build input file cannot be found: '/Users/taocong/Desktop/RNProject/AppDemo/node_modules/react-native/third-party/

cd node_modules/react-native/third-party/glog-0.3.4
../../scripts/ios-configure-glog.sh