React Native Android 开发中遇到的坑
2015-12-17 20:06
686 查看
react native 更新非常活跃,下面的总结可能在后续会被完善修改好,根据react native 版本情况采用下面的方法,
我在使用的时间是 2015年12月10日。
React Native第三方lib地址 (https://react.parts/native)
Android上的webview 不可用 要用第三方的库,我在项目中使用的webview 是https://github.com/lucasferreira/react-native-webview-android
网络请求方式,我使用官网的示例代码并没用成功,简单修改后才能使用 示例如下:
不同于修改JS代码能直接生效,每一次在Android 项目添加图片或者修改 Android原生项目的资源的时候,要重新运行 react-native run-android ,生成资源文件。
图片大小的控制 需要靠 drawable-hdpi 还是 xhdpi、xxhdpi 等资源目录名字控制,例如相同的图片放在hdpi会放大一些,xhdpi精度会高一些。
React Components 组件间传参
在MianPage页面代码如下
在 MenuListPage 使用传递过来的参数如下,需要注意的是 onSelectMenu 这个方法名字要一致
通过学习下面的官方文档了解如何传参:
React 组件通过一个render()方法,接受输入的参数并返回展示的对象。
以下这个例子使用了 JSX,它类似于XML的语法
输入的参数通过render()传入组件后,将存储在this.props
JSX 是可选的,并不强制要求使用。
点击 “Compiled JS” 可以看到 JSX 编译之后的 JavaScript 代码
Live JSX Editor
输出结果:Hello John
自定义native 控件 在int等值传参时候的定义办法 以及报错的时候排错思路,要打开Android logcat 工具 看Android端的报错才能分析出来,
如果要求参数是int,使用的时候因为js的传参是String 例如
要用这种方式调用 :textSize= {20} 如果用 textSize= “20”,这种方式会报错
我的kindle助手项目 react 版本地址:https://github.com/wudizhuo/kindle_react
我在使用的时间是 2015年12月10日。
React Native第三方lib地址 (https://react.parts/native)
Android上的webview 不可用 要用第三方的库,我在项目中使用的webview 是https://github.com/lucasferreira/react-native-webview-android
网络请求方式,我使用官网的示例代码并没用成功,简单修改后才能使用 示例如下:
fetch(reqUrl, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify(post_data) }).then((response) => response.json()) .then((responseText) => { console.log(responseText); this.setState({ isLoading: false, response: responseText, }); }) .catch((error) => { this.setState({ isLoading: false, response: null, }); });
不同于修改JS代码能直接生效,每一次在Android 项目添加图片或者修改 Android原生项目的资源的时候,要重新运行 react-native run-android ,生成资源文件。
图片大小的控制 需要靠 drawable-hdpi 还是 xhdpi、xxhdpi 等资源目录名字控制,例如相同的图片放在hdpi会放大一些,xhdpi精度会高一些。
React Components 组件间传参
在MianPage页面代码如下
onSelectMenu: function () { this.goToSetting(); this.refs[DRAWER_REF].closeDrawer(); }, <MenuList onSelectMenu={this.onSelectMenu} />
在 MenuListPage 使用传递过来的参数如下,需要注意的是 onSelectMenu 这个方法名字要一致
<TouchableHighlight style={styles.touchable} underlayColor="#B3E5FC" onPress={this.props.onSelectMenu}> <Text style={styles.text}> 设置 </Text> </TouchableHighlight>
通过学习下面的官方文档了解如何传参:
React 组件通过一个render()方法,接受输入的参数并返回展示的对象。
以下这个例子使用了 JSX,它类似于XML的语法
输入的参数通过render()传入组件后,将存储在this.props
JSX 是可选的,并不强制要求使用。
点击 “Compiled JS” 可以看到 JSX 编译之后的 JavaScript 代码
Live JSX Editor
var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode)
输出结果:Hello John
自定义native 控件 在int等值传参时候的定义办法 以及报错的时候排错思路,要打开Android logcat 工具 看Android端的报错才能分析出来,
如果要求参数是int,使用的时候因为js的传参是String 例如
要用这种方式调用 :textSize= {20} 如果用 textSize= “20”,这种方式会报错
@ReactProp(name = "textSize", defaultFloat = 12f) public void setTextSize(TextView view, float texs) { view.setTextSize(textSize); }
我的kindle助手项目 react 版本地址:https://github.com/wudizhuo/kindle_react
相关文章推荐
- React Native Android 使用友盟SDK功能
- react-native执行 npm install cl.exe找不到 的问题
- React Native 中组件的生命周期
- zoj Reactor Cooling
- React Native Android Navigator的使用
- React Native for Android 热部署图片自定义方案
- sgu194 Reactor Cooling【无源汇有上下界可行流】
- React组件生命周期-正确执行运行阶段的函数
- React组件生命周期-正确执行初始化阶段的函数
- React组件生命周期-初始化阶段的函数执行顺序
- 如何评价ionic和react native?
- React-非dom属性-key
- React 入门实例教程
- React-非dom属性-ref标签
- React-非dom属性-dangerouslySetInnerHTML标签
- React Native资料汇总
- 一看就懂的ReactJs入门教程-精华版
- ReactJS入门学习二
- Window环境下配置React Native Android环境
- react基础教程