[React-native]第一行代码Helloworld及集成已有项目的方案

前端之家收集整理的这篇文章主要介绍了[React-native]第一行代码Helloworld及集成已有项目的方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、参考官方文档点击打开链接写了第一个文档hello world

代码如下:

初始化一个项目HelloWorld,进入Helloworld文件夹,执行命令:

react-native init HelloWorld

得到文件夹中文件

修改index.android.js如下

import React,{Component} from 'react';
import {AppRegistry,Text} from 'react-native';
class HelloWorld extends Component{
  render(){
    return (
        <Text>Hello world!</Text>
      );
  }
}
AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);

二、开启学习ES 6第一步:部署支持环境

一、nvm版本管理工具安装点击打开链接(nvm链接中包含安装地址,可获取最新版本)

@H_502_36@1.控制台直接输入命令安装:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

仅仅只是下载成功,还需执行下述命令:

source ~/.nvm/nvm.sh
然后查看如下则成功:


@H_502_36@二、Node.js是JavaScript语言的服务器运行环境,对ES6的支持度比浏览器更高。

$ nvm install node

PS:如何使用node.js执行js

例如新建一个app001.js

var tmp = new Date();
function f(){
	console.log(tmp);
}
f();

在控制台执行及结果:

ebj1831:ES6 user$ node --harmony app001.js 
2016-11-01T08:56:12.241Z


三、在已有项目中引入react native

参考文档1点击打开链接
参考文档2点击打开链接

一)进入已有项目根目录执行下述命令:

PS:共三行命令。究竟是什么意思?

$ npm init
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
@H_502_36@第一条:npm init会引导你创建一个package.json文件包括名称、版本、作者这些信息等。

对于我们这些原生想做React native的人来说,确实不知道package.json是做什么用的,各个参数用来做什么。参考package.json的各个字段意思

当然,我们只是先引入一个helloworld可以不参考。直接去之前的demo里面找到package.json复制过来就可以了!!!(拿来主义总规非正统做法,大家可一不可再)


@H_502_36@第二条:npm install --save react react-native:安装的同时,将信息写入package.json中 @H_502_36@第三条:命令的作用。从https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig下载文件并且文件名为.flowconfig。

二、打开package.json的scripts中,添加这一行:

(当然,这个对于我们来说就不必要了,我们是复制的官方的demo的package.json,里面已经有了)

"start": "node node_modules/react-native/local-cli/cli.js start"

三、从demo里面把index.android.js复制到我们的项目的根目录下面。

import React,()=>HelloWorld);

在app的build.gradle添加依赖:(放弃低于34的版本吧,写activity用新版本超级轻松)

compile "com.facebook.react:react-native:+" // From node_modules.
PS:一开始提示这个错误(应该大部分人不会遇到,but还是写一下)
Error:(30,13) Failed to resolve: com.facebook.react:react-native:0.36.0
Disable offline mode and Sync

原因是默认设置里面gradle是离线offline的缘故。解决如下:


四、在程序的(非当前module)build.gradle添加:

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS,Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
    ...
}

红色预警,此处有坑:

一定要记得把$rootDir/../node_modules/react-native/android中间的..去掉,改成$rootDir/node_modules/react-native/android

PS:遇到一个错误

tried to access method android.support.v4.net.ConnectivityManagerCompat.<init>:
(Lcom/facebook/react/bridge/ReactApplicationContext;)V from class com.facebook.react.modules.netinfo.NetInfoModule


原因:V7包冲突

把原有项目的v7包改成这个:

compile 'com.android.support:appcompat-v7:23.0.1'

当然对应的把这些也改成这样为好:

compileSdkVersion 23
    buildToolsVersion '23.0.1'

    defaultConfig {
        applicationId "com.example.user.reactnativedemo"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }

五、AndroidManifest.xml添加网络权限:

<uses-permission android:name="android.permission.INTERNET" />

六、添加原生代码

(此处就不要参考官方的代码了,实在是太长了,用react34之后新写法吧)如下:

@H_502_36@一)写个application:
package com.example.user.reactnativedemo;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}
@H_502_36@二)写个activity如下:
package com.example.user.reactnativedemo;

import com.facebook.react.ReactActivity;

/**
 * Created by user on 16/11/2.
 */
public class MyReactActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "HelloWorld";
    }
}
@H_502_36@三、主activity如下:(原生demo,主要用来跳转到react-native页面
package com.example.user.reactnativedemo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {
    Button bt1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bt1 = (Button) findViewById(R.id.bt1);
        bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this,MyReactActivity.class));
            }
        });
    }
}
@H_502_36@四、androidManifest如下:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.user.reactnativedemo">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:name=".MainApplication"
        android:supportsRtl="true"
        >
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MyReactActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>
    </application>

</manifest>
@H_502_36@五、模拟器效果如下:
@H_502_36@六、真机运行效果

问题:真机屏幕显示一块白屏。As的logcat提示

com.facebook.react.devsupport.JSException: Could not get BatchedBridge,make sure your bundle is packaged correctly
解决方案:

进入项目,在android/app/src/main下新建assets目录,控制台执行以下两条命令

react-native start > /dev/null 2>&1 &
curl "http://localhost:8081/index.android.bundle?platform=android" -o "app/src/main/assets/index.android.bundle"

成功效果如下:



动画效果图如下:

猜你在找的React相关文章