环境搭建:参考教程,讲的非常详细
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://www.jb51.cc/article/p-pdjqadte-cb.html
去开启服务器确认是否开启了服务器,可以浏览器查看:http://localhost:8081/index.android.bundle?platform=android
- 关于自定义组件的方式
/** * 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>
);
}
注意,有三种定义组件的方式,所以也有三种导出组件的方式*