react-native练手(android版)

Posted fengnovo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native练手(android版)相关的知识,希望对你有一定的参考价值。

1.环境搭建

1)一步步按  https://reactnative.cn/docs/getting-started.html 操作

2)brew install watchman

3)https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html  下载并安装 jdk 8,javac -version 看安装成功与否

4)https://developer.android.com/studio/index.html 下载并安装Android Studio 3,配置 ANDROID_HOME 环境变量。。。

google站点访问比较慢,要用 ping ip 查最快的IP是多少,再配置hosts  如 203.208.41.67 dl.google.com

建议Android5的sdk以上都安装

 

5)react-native init AB

 

用Android Studio打开项目,连上手机,运行

 

运行时如果报错  Cause: aidl is missing from  /Android/sdk/build-tools/27.0.3/aidl...

按下面的去修改sdk版本和build工具版本

 

 

 

 

import React, {Component} from \'react\';
import {Platform, StyleSheet, Text, View, WebView, BackHandler} from \'react-native\';

const instructions = Platform.select({
  ios: \'Press Cmd+R to reload,\\n\' + \'Cmd+D or shake for dev menu\',
  android:
    \'Double tap R on your keyboard to reload,\\n\' +
    \'Shake or press menu button for dev menu\',
});

type Props = {};
export default class App extends Component<Props> {
  onNavigationStateChange = navState => {
    this.setState({
      backButtonEnabled: navState.canGoBack
    });
  };

  // //自定义返回事件
  // _goBackPage = () => {

  //   //  官网中描述:backButtonEnabled: false,表示webView中没有返回事件,为true则表示该webView有回退事件
  //   if (this.state.backButtonEnabled) {
  //     this.refs[\'webView\'].goBack();
  //   } else {//否则返回到上一个页面
  //     this.nav.goBack();
  //   }
  // };

  // 监听原生返回键事件
  componentDidMount() {
    if (Platform.OS === \'android\') {
      BackHandler.addEventListener(\'hardwareBackPress\', this.onBackAndroid);
    }
  }

  onBackAndroid = () => {
    //  官网中描述:backButtonEnabled: false,表示webView中没有返回事件,为true则表示该webView有回退事件
    if (this.state.backButtonEnabled) {
      this.refs[\'webView\'].goBack();
      return true;
    } else {
     if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
        //最近2秒内按过back键,可以退出应用。
        return false;
      }
      this.lastBackPressed = Date.now();
      ToastAndroid.show(\'再按一次退出应用\', ToastAndroid.SHORT);
      return true;
    }
  };
  render() {
    return (
        <WebView
            /*          两种加载方式
              *   加载网页 source:{{uri: \'网址\'}}
              *   加载本地静态页面 source:{{html: \'静态页面代码段\'}}
              */

            // source={{html: \'<h1>这是加载的代码段</h1>\'}}
            // source={{uri: \'http://www.baidu.com\'}}
            source={ {uri: \'file:///android_asset/cnode/index.html\'} }
            //加载状态显示
            startInLoadingState={true}
            //存储 IOS是默认支持的
            domStorageEnabled={true}
            //是否支持javascript
            javaScriptEnabled={true}
            ref="webView"
            onNavigationStateChange={this.onNavigationStateChange}
        />
    );
  }
}

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,
  },
});

 

 

2.打包项目

1)一步步按 https://blog.csdn.net/weixin_38706214/article/details/78250525 博客的 ‘命令行发布版本’ 操作

2)mkdir -p android/app/src/main/assets

3)运行 react-native run-android 

 浏览器打开 http://localhost:8081/index.delta?platform=android&dev=true&minify=false 拷贝出页面内容复制保存为index.android.bundle文件

   具体目录路径为 /android/app/src/main/assets/index.android.bundle

4)到   /android 目录下

  运行 ./gradlew assembleRelease

5)生成的apk包在 /android/app/build/outputs/apk/release/app-release.apk

 

参考:

https://reactnative.cn/docs/getting-started.html

https://blog.csdn.net/weixin_38706214/article/details/78250525

https://www.aliyun.com/jiaocheng/357361.html

https://www.aliyun.com/jiaocheng/359202.html

以上是关于react-native练手(android版)的主要内容,如果未能解决你的问题,请参考以下文章

mnist 缩减版 练手 tensorflow python

Java练手项目报错集锦(IDEA版)

React-Native全面屏适配

Java练手小项目飞机大战2.0加强版

你们要的练手项目:前后端分离的在线考试系统(网页版+小程序),我已经找到了~

react-native版文字跑马灯