React Native 入门问题

[zhouzhongyuan]

react-native run-android

Android error “Could not get BatchedBridge, make sure your bundle is packaged correctly” on start of app

结局： react-native start
参考

[zhouzhongyuan]

如何进行Debug

官方文档： debugging

如何使用Chrome中的React Developer Tools?

react-dev-tools

暂时不能，只能使用如下方法。

为什么不能使用

Install the package:

npm install --save-dev react-devtools

Add a script to your package.json:

  "scripts": {
    // ...
    "devtools": "react-devtools"
  }

npm run devtools 

Android 虚拟机

• 首先启动模拟器

• 进入项目所在文件夹

• react-native run-android

• react-native start

• 模拟器上 Command⌘ + M
  

• 点击“Debug JS Remotely”

• 浏览器打开http://localhost:8081/debugger-ui

• 打开"Developer Tools"即可看到console.log

[zhouzhongyuan]

样式库

样式库初步确定为react-native-material-ui，因为与在React中使用的material-u的API一致。

• 经过在iOS和Android上的测试，样式是可以的。但是发现react-native-material-ui-demo-app切换的时候特别慢，iOS中Toolbar的高度有问题。

[zhouzhongyuan]

如何使用material-ui中的变量

举例： 我想获得Appbar的高度
两种方式：
方式一（HOC）：

import muiThemeable from 'material-ui/styles/muiThemeable';
this.props.muiTheme.appBar.height; // AppBar高度
muiThemeable()(**Component**)

方式二（不推荐，因为React官方不再推荐使用context，以后可能会被删除）：

    static contextTypes = {
        muiTheme: PropTypes.object.isRequired,
    }
    this.context.muiTheme.appBar.height // AppBar高度

[zhouzhongyuan]

TextInput取值

正确方法 通过state控制input的value

---

this.refs.myTextInput._lastNativeText

Way to retrieve TextInput value programmatically via property access or method call?

• 通过onChange或者onChangeText来改变state，是非常垃圾的做法。因为这会导致这个控件每次都render。如果使用shouldComponentUpdate就更复杂了。

[zhouzhongyuan]

Live Reload 与 Hot Reload区别

Live reloading reloads or refreshes the entire app when a file changes. For example, if you were four links deep into your navigation and saved a change, live reloading would restart the app and load the app back to the initial route.
重启App，回到App初始页面。

Hot reloading only refreshes the files that were changed without losing the state of the app. For example, if you were four links deep into your navigation and saved a change to some styling, the state would not change, but the new styles would appear on the page without having to navigate back to the page you are on because you would still be on the same page.
刷新当前软页面。

[zhouzhongyuan]

怎样调试Network

在RN入口处添加

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

• How can I view network requests (for debugging) in React Native?
• Show network requests such as fetch, WebSocket etc. in chrome dev tools #934

[zhouzhongyuan]

expected a string (for built-in components) or a class/function (for composite components) but got: object.

错误信息

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `FluxContainer(AuthenticatedComponent)`.

错误代码

import React, {Component} from "react";
import AppStatus from "../../stores/AppStatus";
import {Container} from "flux/utils";

var AuthenticatedRoute = (BaseComponent, LoginComponent, ToastComponent, key) => {
    LoginComponent = LoginComponent;
    class AuthenticatedComponent extends Component {
        static getStores() {
            return [AppStatus];
        }
        static calculateState(prevState, prevProps) {
            return {
                state: AppStatus.getState(),
            };
        }
        render() {
            if (this.state.state.get('inited')) {
                if (AppStatus.isLogined()) {
                    return (<BaseComponent {...this.props}></BaseComponent>);
                } else {
                    return (<LoginComponent {...this.props}></LoginComponent>);
                }
            } else {
                return <ToastComponent icon="loading" show>初始化...</ToastComponent>;
            }
        }
    }
    var result = Container.create(AuthenticatedComponent);
    if (key) {
        result.prototype.key = key;
    }
    return result;
};
export default AuthenticatedRoute;

[zhouzhongyuan]

debug相关问题

1. 国产手机报如下错误

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to establish session

解决办法

1. enable developer mode - In your phone, go to Settings, About phone and click on MIUI version 7 times. You’ll see a pop up which says you are a developer now.
2. Go back to Settings, Additional settings, Developer options and enable USB Debugging.
3. Connect your phone to your PC/Mac and on the phone authorize your computer
4. go back to Developer options, scroll down to find Turn on MIUI optimization and disable it. Your phone will be rebooted

2. 在使用react-devtools的时候，不显示树状结构。

根据规律，真机上不都显示，模拟器能显示。

3. 一直出现"waiting for React……"

 adb reverse tcp:8097 tcp:8097

[zhouzhongyuan]

element type error

错误信息

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `CellLayout`.

错误代码

        const AccessoryView = React.cloneElement(
                this.props.children
            );
        return (
            <View>
                <Cell
                    cellStyle="Basic"
                    title={this.props.title}
                    cellAccessoryView={<AccessoryView />}
                />
                {this.props.divider ? <Divider /> : false}
            </View>
        );

解析

• 根据React.cloneElement，AccessoryView已经是一个element。
• 而cellAccessoryView={<AccessoryView />}中 ，<AccessoryView />这句话的意思是React.createElement(AccessoryView, null);，要想createElement,其参数需要是React Component。AccessoryView是一个element，所以报错 。

解决办法

cellAccessoryView={<AccessoryView />}

改为

cellAccessoryView={AccessoryView}

[zhouzhongyuan]

IDE: Deco (ios only)

[zhouzhongyuan]

错误

错误截图

错误文字

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

Body:
{
"from":"/Users/bokeadmin/Desktop/yesdemo/src/app/scm.js",
"to":"../../node_modules/react-native/packager/src/js/lib/yes-native",
"message":"Unable to resolve module ../../node_modules/react-native/packager/src/js/lib/yes-native from /Users/bokeadmin/Desktop/yesdemo/src/app/scm.js: Directory /Users/bokeadmin/Desktop/yesdemo/node_modules/react-native/packager/src/js/lib/yes-native doesn't exist",
"name":"UnableToResolveError",
"type":"UnableToResolveError",
"errors":[{}]
}

processBundleResult
DevServerHelper.java:390
access$400
DevServerHelper.java:65
execute
DevServerHelper.java:333
emitChunk
MultipartStreamReader.java:69
readAllParts
MultipartStreamReader.java:116
onResponse
DevServerHelper.java:321
execute
RealCall.java:126
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1112
run
ThreadPoolExecutor.java:587
run
Thread.java:818

解决

删除src目录webpack.config.js文件中的

'react-native': path.resolve(__dirname, '../react-native-web/src')

[YiFeng-Developer]

TextInput取值

正确方法 通过state控制input的value

this.refs.myTextInput._lastNativeText

Way to retrieve TextInput value programmatically via property access or method call?

• 通过onChange或者onChangeText来改变state，是非常垃圾的做法。因为这会导致这个控件每次都render。如果使用shouldComponentUpdate就更复杂了。

ref本来就是一种反模式的处理，react官方并不推荐过度使用ref

而且RN官方在手册中也推荐的是你口中的垃圾做法

我不认为官方不知道这种 ref 取值的方法，而且不清楚rerender的弊端（虽然我也在考虑rerender的问题），但我想说的是官方推荐的说法总不能沦为垃圾做法吧