RN - 代码天地

一、RN搭建开发环境
1.安装依赖软件：
Node.js 8.3以上
D:\Program Files\nodejs\

    Python       2.x以上     
        D:\Python27\         
        D:\Python27\Scripts
    JDK          1.8          
        Java_Home=C:\Program Files\Java\jdk1.8.0_65       
        %Java_Home%\bin
    Android SDK              
        ANDROID_HOME=D:\AndroidStudio\SDK
        %ANDROID_HOME%\platform-tools
        %ANDROID_HOME%\tools

2.Yarn、React Native的命令行工具

    Yarn与npm都是软件管理工具，Yarn速度快很多

    npm(该命令是node.js中的命令，用于安装软件)

    设置npm镜像：
        npm config set registry https://registry.npm.taobao.org --global 
        npm config set disturl https://npm.taobao.org/dist --global

    Yarn、React Native的命令行工具（react-native-cli）
        npm install -g yarn react-native-cli

    安装完yarn后同理也要设置镜像源：
        yarn config set registry https://registry.npm.taobao.org --global 
        yarn config set disturl https://npm.taobao.org/dist --global4

    测试:
        react-native --version    
        yarn -v

3.环境使用
        React开发环境：VScode
            Node.js      8.3以上 

        Android环境（编译运行环境）：AS
            SDK platform:开发版本库
                Android SDK Platform 26    （0.56）    
                Android SDK Platform 23    （0.55.4）

                Google Api Intel x86 Atom_64 System Image   ;   intel HAXM   （创建虚拟机使用）

            SDK bulid tools:代码编译工具
                26.0.3                     （0.56） 
                23.0.1                     （0.55.4）


4.创建项目运行到模拟器：
    方式一：
        1.创建项目
            react-native init HelloWorld
            react-native init HelloWorld --version 0.55.4  
        2.进入到项目目录中
            cd HelloWorld     目录cmd
        3.运行
            react-native run-android

    方式二:
        1.导入新项目
            使用其他可用项目即可
        2.进入到项目目录中
            cd HelloWorld     目录cmd
        3.运行
            react-native run-android

    方式三:
        Android Studio打开android项目，编译运行，到模拟器
            模拟器配置设置:
                摇一摇：启动设置页面      Ctrl+M
                HOST：配置服务连接地址:   11.11.11.11:8081

        开启node服务:
            npm start开启

    方式四:
        直接使用.apk文件转入模拟器
            模拟器配置设置:
                    摇一摇：启动设置页面      Ctrl+M
                    HOST：配置服务连接地址:   11.11.11.11:8081
        开启node服务:
                npm start开启


5.RN常用命令:
    react-natice init HelloWorld
    react-native init HelloWorld --version 0.55.4  
    react-native --version
    react-native run-android
    react-narive run-ios   

    npm install -g yarn react-native-cli    安装软件
    npm start                               开启Node服务

二、RN项目结构:
android 编译运行代码

ios          编译运行代码

node_modules  自动生成三方依赖库

App.js     显示的组件页面

index.js  渲染显示页面

    AppRegistry.registerComponent('HelloWorld', () => App);
        将APP组件渲染到Android获取IOS中"HelloWorld"标记

    Android渲染路径:
        @Override
        protected String getJSMainModuleName() {
            return "index";
        }

        @Override
        protected String getMainComponentName() {
            return "HelloWorld";
        }

    IOS渲染路径:
        jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

        RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName:@"HelloWorld"
                                                    initialProperties:nil
                                                    launchOptions:launchOptions];
package.json   系统项目配置文件

三、页面组件分析
index.js 渲染显示页面
导入依赖:react-native
import { AppRegistry } from ‘react-native’;
import App from ‘./App’;

    渲染:将App组件替换HelloWorld标记
    AppRegistry.registerComponent('HelloWorld', () => App);

App.js    显示的组件页面

    导入依赖:react(自定义组件类)   react-native(使用RN中的控件和API)  
    import React, { Component } from "react";
    import { StyleSheet, Text, View } from "react-native";


    定义组件
    class App extends Component {

        render() {
            return (

            //渲染页面:RN中控件使用
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to React Native!</Text>
                <Text style={styles.instructions}>To get started, edit App.js</Text>
                <Text style={styles.instructions}>欢迎来到LOL</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
        }
    });


    //导出组件
     export default App;

四、基本控件以及布局样式
View
View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，
并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图

<View style={{flexDirection: 'row', height: 100, padding: 20}}> 
    <View style={{backgroundColor: 'blue', flex: 0.3}} /> 
    <View style={{backgroundColor: 'red', flex: 0.5}} /> 
</View>

Text
显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理

<Text style={styles.titleText} onPress={this.onPressTitle}> {this.state.titleText} </Text>

Image:
不同类型图片的React组件，包括网络图片、本地资源

<Image style={styles.icon} source={require('./icon.png')} />   同级
<Image style={styles.icon} source={require('./img/icon.png')} />   下级
<Image style={styles.icon} source={require('./../icon.png')} />   上级
<Image style={styles.icon} source={require('./../img/icon.png')} />  同级文件夹

<Image style={styles.logo} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} />

TextInput
输入文本的基础组件。
onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。
onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用

<TextInput 
    style={{height: 40}} 
    placeholder="Type here to translate!" 
    onChangeText={(text) => this.setState({text})} />
<Text 
style={{padding: 10, fontSize: 42}}> 
    {this.state.text}
</Text>

Button：
显示一个简单的按钮
是一个简单的跨平台的按钮组件。

<Button
    onPress={() => {
        Alert.alert("你点击了按钮！");
    }}
    title="点我！"
    color="#841584"
/>

Touchable系列组件:
TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

在Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。

TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

<TouchableHighlight
    onPress={this._onPressButton} //点击响应
    onLongPress={this._onLongPressButton} //长按响应
    underlayColor="white"
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>TouchableHighlight</Text>
    </View>
</TouchableHighlight>

//————————————————————————————————–
样式:
style的属性;驼峰命名法，例如将background-color改为backgroundColor

还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高,间接实现样式的继承

使用StyleSheet.create来集中定义组件的样式

<View>
    <Text style={styles.red}>just red</Text> 
    <Text style={styles.bigblue}>just bigblue</Text> 
    <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> 
    <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
const styles = StyleSheet.create({ 
    bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, 
    red: { color: 'red', },
});

关于样式
（1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；
                  <View style={{fontSize:40, width:80,}}> </View>
（2）调用样式表:{样式类.属性}
                  <View style={styles.container}></View>
（3）样式表和内联样式共存:{[]}
                  <View style={[styles.container, {fontSize:40, width:80}]}>
（4）多个样式表:{[样式类1， 样式类2]}

RN

猜你喜欢