Open zhouzhongyuan opened 7 years ago
官方文档: debugging
暂时不能,只能使用如下方法。
Install the package:
npm install --save-dev react-devtools
Add a script to your package.json:
"scripts": {
// ...
"devtools": "react-devtools"
}
npm run devtools
首先启动模拟器
进入项目所在文件夹
react-native run-android
react-native start
模拟器上 Command⌘ + M
点击“Debug JS Remotely”
打开"Developer Tools"即可看到console.log
样式库初步确定为react-native-material-ui,因为与在React中使用的material-u的API一致。
举例: 我想获得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高度
this.refs.myTextInput._lastNativeText
Way to retrieve TextInput value programmatically via property access or method call?
onChange
或者onChangeText
来改变state
,是非常垃圾的做法。因为这会导致这个控件每次都render
。如果使用shouldComponentUpdate
就更复杂了。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. 刷新当前软页面。
在RN入口处添加
const _XHR = GLOBAL.originalXMLHttpRequest ?
GLOBAL.originalXMLHttpRequest :
GLOBAL.XMLHttpRequest
XMLHttpRequest = _XHR
错误信息
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;
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to establish session
解决办法
react-devtools
的时候,不显示树状结构。根据规律,真机上不都显示,模拟器能显示。
adb reverse tcp:8097 tcp:8097
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}
IDE: Deco (ios only)
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')
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的问题),但我想说的是官方推荐的说法总不能沦为垃圾做法吧
结局:
react-native start
参考