Reac native (1) 环境搭建

前端之家收集整理的这篇文章主要介绍了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 又红了


  • 关于自定义组件的方式
    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);
  1. 在其他组件中引用,先导入你的自定义组件,然后与Android的view类似
导入:import HelloComponent from './HelloComponent'

使用:
render() {
    return (
      <View style={styles.container}>
        <HelloComponent/>
      </View>
    );
  }

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

原文链接:https://www.f2er.com/react/304297.html

猜你在找的React相关文章