Reac native (1) 环境搭建

环境搭建：参考教程，讲的非常详细

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.csdn.net/qq_25827845/article/details/52974991
去开启服务器
确认是否开启了服务器，可以浏览器查看：http://localhost:8081/index.android.bundle?platform=android

关于自定义组件的方式
1. 新建js文件，内容可复制 index.android.js
2. 注意修改新建文件的类名，然后在类名前添加export default ，将他导出
3. 注意修改最后一行的AppRegistry.registerComponent，将类名换成自己的类名
4. 最后的代码如下：

/**
 * 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>
    );
  }

注意，有三种定义组件的方式，所以也有三种导出组件的方式*

Reac native (1) 环境搭建

猜你喜欢