环境搭建:参考教程,讲的非常详细
2.接着运行项目文件,我也忘了我的第一个项目从哪下载下来的了,但是第一次用studio运行,一般会报 could not get batchedbridge make sure 这个错误,
解决步骤:
- 在Android的src-main目录下,新建文件夹/包 assets;
- 使用命令行cmd ,定位到你项目的根目录下,运行命令
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
- 如果失败了,看下命令行里面的 文件夹目录是否是正确的。或者是否 npm install
3.后面应该还有坑,但我现在还没遇到,这篇博客应该有帮助
4.点击reload 又红了
在项目文件夹下输入react-native start或者npm start均可开启服务器,参考:http://blog.youkuaiyun.com/qq_25827845/article/details/52974991
去开启服务器确认是否开启了服务器,可以浏览器查看:http://localhost:8081/index.android.bundle?platform=android
- 关于自定义组件的方式
- 新建js文件,内容可复制 index.android.js
- 注意修改新建文件的类名,然后在类名前添加export default ,将他导出
- 注意修改最后一行的AppRegistry.registerComponent,将类名换成自己的类名
- 最后的代码如下:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class HelloComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
HelloComponent
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('react1', () => HelloComponent);
- 在其他组件中引用,先导入你的自定义组件,然后与Android的view类似
导入:import HelloComponent from './HelloComponent'
使用:
render() {
return (
<View style={styles.container}>
<HelloComponent/>
</View>
);
}
注意,有三种定义组件的方式,所以也有三种导出组件的方式*