react native初学问题集合（持续更新中）

1.连接模拟器

cmd到android sdk文件加下

D:\Program\Android\sdk\platform-tools>
执行
adb devices

然后
adb connect 127.0.0.1:21513
注意各版本的模拟的端口不一样的，多开下的端口又不一样

模拟器	端口
网易Mumu	7555
夜神	62001
逍遥	21503
iTools	54001
天天	6555
海马	26744
BlueStacks	5555

至于多开模式下具体每个模拟器的具体端口可以使用：

比如说逍遥就搜前三位端口
netstat -ano|findstr 215

剩下你就只能去一个个试端口了(当然端口是越来越大)，我的第二台端口是21513，祝你好运~~~~~

2.关于代码修改后更新app

使用命令

adb shell input keyevent 82

可以直接调出开发者菜单

点击Reload更新代码

你也可以直接摇晃手机，但是模拟器可能要摇多次才能调出开发者菜单

这样还是太累那么我们可以使用开发者菜单里的

enable live reload
或
strat/stop sampling profiler

他会实时监听你的修改，并更新app

双击ctrl+s也可更新代码

reload	重新加载
debug js remotely	远程调试js
enable live reload	启用实时重新加载
disable hot reloading	禁用热重新加载
toggle inspector	切换
hide perf monitor	隐藏perf监视器
strat/stop sampling profiler	strat / stop采样分析器
dev settings	开发设置

3.为了同在浏览器上开发

请安装react-devtools 安装步骤按官方的就可以了

请注意是官方

是不是很开心

#每次更新代码后 重新执行以下命令

adb shell input keyevent 82

#就出来了

#注意更新代码前，你需要重新在developer中view工具栏reload以下

#用于查看console.log
http://localhost:8081/debugger-ui

小技巧：使用 toggle inspector 加 devtools 跟方便快捷

4.的使用console.log

// 在相应的工程下启动 react-native log-android 官网有详细文档
// 为性能考虑
if (!__DEV__) {
  global.console = {
    info: () => {},
    log: () => {},
    warn: () => {},
    debug: () => {},
    error: () => {}
  };
}

5.关于mqtt消息队列的链接

可使用react_native_mqtt 或 react-native-paho-mqtt

react_native_mqtt

import init from 'react_native_mqtt';
import {
  AsyncStorage
} from 'react-native';

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  reconnect: true,
  sync: {}
});

function onConnect() {
  console.log("成功");
  client.subscribe('dev');
}

function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0) {
    console.log("onConnectionLost:" + responseObject.errorMessage);
  }
}

export function onMessageArrived(message) {
  console.log("onMessageArrived:" + message.payloadBytes);
  console.log("onMessageArrived:" + message.destinationName);
  console.log("onMessageArrived:" + message.qos);
  console.log("onMessageArrived:" + message.retained);
  console.log("onMessageArrived:" + message.duplicate);
  console.log("onMessageArrived:" + message.payloadString);
}

const client = new Paho.MQTT.Client('10.158.4.203', 8083, '/mqtt');
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({
  onSuccess: onConnect,
  onFailure: (e) => {
    console.log('失败');
    console.log(e);
  },
  useSSL: false
});

react-native-paho-mqtt

import {
  Client,
  Message
} from 'react-native-paho-mqtt';

console.log('react-native-paho-mqtt');
const myStorage = {
  setItem: (key, item) => {
    myStorage[key] = item;
  },
  getItem: (key) => myStorage[key],
  removeItem: (key) => {
    delete myStorage[key];
  }
};

console.log(1);
const client = new Client({
  uri: 'ws://127.0.0.1:8083/mqtt',
  clientId: 'dev',
  storage: myStorage
});

console.log(2);
// set event handlers
client.on('connectionLost', (responseObject) => {
  if (responseObject.errorCode !== 0) {
    console.log('error:' + responseObject.errorMessage);
  }
});

client.on('messageReceived', (message) => {
  console.log('message:' + message.payloadString);
});

// connect the client
client.connect()
  .then(() => {
    // Once a connection has been made, make a subscription and send a message.
    console.log('onConnect');
    return client.subscribe('dev');
  })
  .catch((responseObject) => {
    if (responseObject.errorCode !== 0) {
      console.log('onConnectionLost:' + responseObject.errorMessage);
    }
  });

本地mqtt环境使用emqx

6.eslint 配置

airbnb规则
插件

eslint

eslint-config-airbnb

eslint-plugin-import
#airbnb规则库
eslint-plugin-jsx-a11y
#react规则
eslint-plugin-react
#es6
babel-eslint

# app.js 检查的文件 --ext后面跟上的.js是你要检测文件的后缀，后面的src是要检测的哪个目录下面的文件。
"lint": "eslint app.js --ext .js ./src",

#--fix的作用是自动修复根据你配置的规则检测出来的格式问题
"lint-fix": "eslint app.js --ext .js ./src --fix"

7. Error:Failed to crunch file

问题：Android studio 导入项目出现错误Error:Failed to crunch file
解决方案：项目路径不要放得太深.直接将工程放在根目录下.如：E：//xxx
原因：这个是因为在windows系统中AndroidStudio的文件路径不能超过240字节。所以报错.

 

 

资料：

1. https://www.cnblogs.com/shansheng/p/6478802.html