SETUP

作者: bonon | 来源:发表于2016-08-16 12:26 被阅读10次

Setting up the Starter Kit

Requirements

Firstly, you need a Mac computer for iOS development. If you want to build an Android app only, you can try experimental Linux and Windows support. These instructions presume an OS X installation.

Before you get started, make sure you have the following dependencies installed on your machine:

  • NodeJS >=5 and npm 3. npm 2 is not supported.

  • Homebrew (or an alternative way to install OSX packages)

  • Latest React Native CLI

        $ npm install -g react-native-cli
    

Installation

Install dependencies from NPM

$ npm install

Create a blank configuration file

$ cp env.example.js env.js

Running the iOS application

  1. Install Requirements:
  • Xcode for iOS development (download from Mac App Store)
  • Ruby (>2.2) to run CocoaPods
  • CocoaPods 1.0 or newer for iOS package management.

Please note that CocoaPods 0.x will not work, and at the time of writing the version in Homebrew is still 0.39, so check your pod --version and install 1.0 with gem if necessary.

  1. Install native iOS dependencies

     $ (cd ios; pod repo update; pod install)
    
  2. Build the app and run the simulator:

     $ react-native run-ios
    

Running the Android application

More details here: React Native Android Setup

  1. Install latest JDK

  2. Install the Android SDK

       $ brew install android-sdk
    
  3. Set ANDROID_HOME environment variable in .bashrc, .zshrc or similar:

       $ export ANDROID_HOME=/usr/local/opt/android-sdk
    
  4. Start Android SDK Manager

       $ android
    
  5. Add SDK tools via Android sdk manager

  • Android SDK tools
  • Android SDK Platform-tools
  • Android SDK Build-tools (Important: Rev. 23.0.1)
  • SDK Platform
  • Intel x86 Atom_64 System Image
  • Intel x86 Atom System Image
  • Android Support Repository
  • Android Support Library
  • Intel x86 Emulator Accelerator (HAXM installer)
  1. Configure and install hardware acceleration

       $ open /usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_<version>.dmg
    
  2. Open Android Virtual Device manager

       $ android avd
    
  3. Add new virtual device

  • name: reactnative
  • Device: Nexus 5
  • Target: Android 6 - API Level 23
  • CBU: Intel Atom x86
  • check Use Host GPU
  1. Build app and run emulator:

     $ react-native run-android
    

Auth0

Configuration

If you don't want to use Auth0, or you want to take it into use later, you can skip this step for now.

  1. Before you start you need to create a new application in Auth0

  2. Set AUTH0_CLIENT_ID and AUTH0_DOMAIN in env.js according to your application you created in Auth

     AUTH0_CLIENT_ID: '<CLIENT_ID>',
     AUTH0_DOMAIN: '<ACCOUNT_NAME>.eu.auth0.com'
    
  3. Follow the steps for your platform below. Check the official instructions for more information.

Customization

The Auth0 login and sign up screens can be customized through the Lock extension.

iOS

  • Change default values in the customiseTheme method in src/services/auth0.js
  • If you want to add images, copy them in the root images folder and add them via Xcode > file > add files to the project in 3 different resolutions (needs to be original and x2 and x3 versions)
  • All changeable values can be retrieved here

Android

  • Change default values for the AppTheme.Lock in android/app/src/main/res/values/styles.xml
  • Add images in android/app/src/main/res/mipmap-<hdpi|mdpi|xhdpi|xxhdpi> in 4 different resolutions
  • All changeable values can be retrieved here

Windows UWP

Windows not yet supported.

相关文章

  • EventBus 简单使用

    简单记录下EventBus的使用: setup1 接收页面 setup2 接收页面 setup3 setup4 ...

  • IOS单元测试

    IOS单元测试 单元测试开始- (void)setUp {[super setUp];// Put setup c...

  • Kubernetes Commands

    Helper setup to edit .yaml files with Vim: VIM Setup for ...

  • Ansible 获取主机信息模块setup、获取文件详细信息模块

    setup 1、获取setup的所有信息,获取的信息有上百条:ansible all -m setup"ansib...

  • vue3.0-setup()

    setup()setup()函数用来定义变量和方法。通过setup()函数定义的变量和方法必须return才有用s...

  • vue3基础

    一、setup setup函数可以被理解为函数的入口 setup函数接收两个参数:props、context(包含...

  • setup

    set up python3 environment sudo apt-get updatesudo apt-ge...

  • SETUP

    Setting up the Starter Kit Requirements Firstly, you need...

  • Setup

    1. VSCode & PIO 参考 这篇文章 安装 VSCode 及 PIO 插件 2. sipeed-rv-d...

  • setup

    1.模板绑定 直接返回模板绑定(非响应式) 响应式 2.参数 2.1 props 是由父组件传递下来的响应式数据和...

网友评论

      本文标题:SETUP

      本文链接:https://www.haomeiwen.com/subject/nijpsttx.html