认识ReactNative

前提: 需要安装好HomeBrew才能安装nodeReact Native环境搭建
使用命令行安装配置环境node.js

brew install node
安装完毕查看版本确定是否安装成功：
npm -v

替换淘宝镜像

npm config set registry https://registry.npm.taobao.org --global

安装React Native

npm install -g yarn react-native-cli

安装完毕查看版本确定是否安装成功: 
react-native -v

到这一步如果都是成功的，说明你的react-native已经安装成功了

创建项目

react-native init projectName(项目名)

创建成功之后运行你的项目就能看见: 说明项目已经成功运行起来了

启动当前服务.png

自定义创建组件的三种方式:

【1】. 通过ES6的方式添加自定义组件


import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';


/**
 * 方式一： ES6
 */
// 创建class类HelloComponent如果需要其他类调用， 就需要使用关键字export default导出
// export default class HelloComponent extends Component {
//     // render()是为了渲染UI层次，必须调用的函数
//     render() {
//         return <Text style={{fontSize:20,backgroundColor:'red'}}>hello</Text>
//     }
// }

自定义组件的调用集成.png

【2】. 通过ES5的方式添加自定义组件

调用方式与ES6方式相同
/*
 * 方式二：ES5
 */
var HelloComponent = React.createClass({
    render() {
        return <Text style={{fontSize:20,backgroundColor:'red'}}>hello</Text>
    }
})
// 在ES5中导出需要特别的方式 module.eexport
module.eexport = HelloComponent;

【3】.通过函数方式添加自定义组件


/*
 * 方式三：函数的方式创建组件
 * 无状态, 不能使用this
 */
function HelloComponent () {
    return <Text style={{fontSize:20,backgroundColor:'red'}}>hello</Text>
}
module.export = HelloComponent;

传值

传递值过程.png

接收值过程.png

React Native 组件的生命周期

组件的生命周期的方法有三个周期

调用render()装载的过程

更新render()的过程

卸载的过程


import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';


/**
 * 方式一： ES6
 */
// 创建class类HelloComponent如果需要其他类调用， 就需要使用关键字export default导出
export default class LifecycleComponent extends Component {
    // 加载构造方法
    constructor(props) {
        super(props)

        console.log('----constructor----')
    }

    // 组件即将加载的时候调用的函数
    componentWillMount() {
        console.log('----componentWillMount----')
    }

    // 组件以及加载完成后调用的函数
    componentDidMount() {
        console.log('----componentDidMount----')
    }

    // 组件要更新调用的函数, 接受组件发送的props信息
    componentWillReceiveProps(nextProps) {
        console.log('----componentWillReceiveProps----')
    }

    // 在接收到新的props信息的调用的函数
    shouldComponentUpdate(nextProps, nextState) {
        console.log('----shouldComponentUpdate----')
        // 这里需要返回一个bool类型
        return true;
    }

    // 组件被调用之前调用的函数
    componentWillUpdate(nextProps, nextState) {
        console.log('----componentWillUpdate----')
    }

    // 组件被移除之前调用的函数
    componentWillUnmount() {
        console.log('----componentWillUnmount----')
    }

    // render()是为了渲染UI层次，必须调用的函数
    render() {
        console.log('----render----')
        cusCount = 0
        // 使用props.name接受其他类传递的值
        return <View>
            <Text style={{fontSize:20,backgroundColor:'red'}}
                  onPress = {()=>{
                      cusCount = cusCount + 1
                      print(cusCount)
                  }}
            >点击事件响应</Text>
            <Text style={{fontSize:20,backgroundColor:'yellow'}}>点击了{this.cusCount}</Text>
        </View>
    }
}

变量导出导入

<变量导出: >
import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
var name = '小明';
var age = '22';
export {name,age};


/**
 * 方式一： ES6
 */
// 创建class类HelloComponent如果需要其他类调用， 就需要使用关键字export default导出
export default class EIComponent extends Component {
    // render()是为了渲染UI层次，必须调用的函数
    render() {
        // 使用props.name接受其他类传递的值
        return <Text style={{fontSize:20,backgroundColor:'red'}}>hello.{this.props.name}</Text>
    }
}

导出变量调用方式.png

函数的调用方式与变量调用方式相同

export function sum(a,b) {
    return a + b;
}

自定义属性Props


import React,{ Component, PropTypes } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';


/**
 * 方式一： ES6
 */
// 创建class类HelloComponent如果需要其他类调用， 就需要使用关键字export default导出
export default class PropsTest extends Component {

    static defaultProps={ // 自定义属性
        // name:'小红',
        // age:16,
        // sex:'男'
    }

    // 检查属性的类型、属性是否正确等，需要导入react库中的PropTypes类
    // import React,{ Component, PropTypes } from 'react';
    static propTypes={
        name:PropTypes.string,
        age:PropTypes.number,
        sex:PropTypes.string.isRequired, // 必须传值的属性
    }

    // render()是为了渲染UI层次，必须调用的函数
    render() {

        // 使用props.name接受其他类传递的值
        return (
            <View>
                <Text style={{fontSize:20,backgroundColor:'red'}}>{this.props.age}</Text>
                <Text style={{fontSize:20,backgroundColor:'red'}}>{this.props.name}</Text> // 这里的props是只读的属性
                <Text style={{fontSize:20,backgroundColor:'red'}}>{this.props.sex}</Text>
            </View>
        )
    }
}

自定义属性延展操作符能够使用ES6语法直接实现

render() {
    var params = {name:'小足',age:18,sex:'男'};
    return (
      <View style={styles.container}>
        <PropsTest
            {...params} //延展操作符
        />
      </View>
    );
  }

自定义State

初始化state有两种方式:
1.在组件的constructor方法中初始化组件
2.在外部直接定义state


import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image // 这里要使用Image的组件所以需要导入raect库中的Image
} from 'react-native';

    /**
     * 方式一： ES6
     */
// 创建class类HelloComponent如果需要其他类调用， 就需要使用关键字export default导出
    export default class StateTest extends Component {
    // 创建私有state
    state={
        size:80
    }
    // state 是组件私有的， 没办法传递的
    constructor(props) {
        super(props)
        // 初始化state
        // this.state={
        //     size:80,
        // }
    }

    // render()是为了渲染UI层次，必须调用的函数
    render() {
        // 使用props.name接受其他类传递的值
        return <View>
            <Text
                style={{fontSize:20}}
                onPress={()=>{
                    this.setState({
                        size: this.state.size+20
                    })
                }}
            >????????</Text>
            <Text
                style={{fontSize:20}}
                    onPress={()=>{
                        this.setState({
                        size: this.state.size-10
                    })
                }}
            >不赞不赞不赞不赞</Text>
            
            <Image
                style={{width: this.state.size, height: this.state.size}}
                source={require('./dianzan.png')}
    />
        </View>
    }
}

自定义类

导出自定义类class

export default class Student {
    constructor(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    getDescription() {
        return '姓名:' + this.name + '   年龄:'+ this.age + '   性别:' + this.sex
    }
}

调用自定义类classs

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import RefTest from './RefTest'
import Student from './Student'

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

export default class App extends Component<{}> {

    constructor(props) {
        super(props);
        this.state=({
            result:'',
            size:0
        })
        this.stu = new Student('小兰', '20', '女')
    }

    render() {

        var params = {name:'小足',age:18,sex:'男'};

        return (
            <View style={styles.container}>
                <Text
                    style={{fontSize:20}}
                    onPress={()=>{
                        var size = this.refs.reftest.getSize();
                        this.setState({
                            size:size,
                        })
                    }}
                >点赞大小:{this.state.size}</Text>

                <RefTest
                    ref="reftest"
                />
                <Text style={{fontSize:20}}>{this.stu.getDescription()}</Text>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#f1f1f1',
        marginTop:50
    }
});

flexDirection使用


import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';


/**
 * 方式一： ES6
 */
// 创建class类HelloComponent如果需要其他类调用， 就需要使用关键字export default导出
export default class FlexBoxTest extends Component {
    // render()是为了渲染UI层次，必须调用的函数
    render() {
        // 使用props.name接受其他类传递的值
        return (
            // flexDirection:'row-reverse' 默认是cloumn
            <View style={ {backgroundColor:"darkgray",marginTop:20}}>
                <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
                    <Text style={ {fontSize:16}}>1</Text>
                </View>
                <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
                    <Text style={ {fontSize:16}}>2</Text>
                </View>
                <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
                    <Text style={ {fontSize:16}}>3</Text>
                </View>
                <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
                    <Text style={ {fontSize:16}}>4</Text>
                </View>
            </View>
        )
    }
}

button的使用


import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback,
    Alert,
    TouchableHighlight
} from 'react-native';


/**
 * 方式一： ES6
 */
// 创建class类HelloComponent如果需要其他类调用， 就需要使用关键字export default导出
export default class TouchableTest extends Component {
    constructor(props) {
        super(props);
        this.state = ({
            count:0,
            text:'',
        })
    }

    // render()是为了渲染UI层次，必须调用的函数
    render() {
        // 使用props.name接受其他类传递的值
        return <View>

            <TouchableWithoutFeedback
                disabled={this.state.waiting}
                onPress={()=> {
                    this.setState({text:'正在登录中...',waiting:true})
                    setTimeout(()=>{
                        this.setState({text:'网络不流畅',waiting:false})
                    },2000);

                }}
            >
                <View style={styles.button}>
                    <Text style={styles.buttonText}>
                        登录
                    </Text>
                </View>
            </TouchableWithoutFeedback>
            <Text style={styles.text}>{this.state.text}</Text>

            <TouchableWithoutFeedback
                // 点击事件
                onPress={()=> {
                    this.setState({count: this.state.count+1})
                }}
                // 常摁事件
                onLongPress={()=>{
                Alert.alert('提示','确认删除吗？',[
                    {text:'取消',onPress:()=>{},style:'cancel'},
                    {text:'确定',onPress:()=>{
                        this.setState({count: this.state.count-1})
                    }}
                ])
            }}
            >
                <View style={styles.button}>
                <Text style={styles.buttonText}>
                    我是TouchableWithoutFeedback,单击我
                </Text>
            </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback
                onPressIn={()=> {
                    this.setState({text:'触摸开始',startTime:new Date().getTime()})
                }}
                onPressOut={()=>{
                    this.setState({text:'触摸结束,持续时间:'+(new Date().getTime()-this.state.startTime)+'毫秒'})
                }}
            >
                <View style={styles.button}>
                    <Text style={styles.buttonText}>
                        点我
                    </Text>
                </View>
            </TouchableWithoutFeedback>
            <TouchableHighlight
                style= {styles.button}
                activeOpacity={0.7}
                underlayColor='green'
                onHideUnderlay={()=>{
                    this.setState({text:'衬底被隐藏'})
                }}
                onShowUnderlay={()=>{
                    this.setState({text:'衬底显示'})
                }}
                onPress={()=>{

                }}
            >
                <View style={styles.button}>
                    <Text style={styles.buttonText}>
                        TouchableHighlight
                    </Text>
                </View>
            </TouchableHighlight>
            <Text style={styles.text}>{this.state.text}</Text>

            <Text style={styles.text}>{this.state.text}</Text>
            <Text style={styles.text}>您单击了:{this.state.count}次</Text>
        </View>
    }
}

const styles = StyleSheet.create({
    button: {
        borderWidth:1
    },
    buttonText: {
        fontSize:30
},
text: {
    fontSize:20
}
})

Image的使用

这里Image的使用的四种方式:

1.使用静态图片资源
2.使用网络图片资源
3.使用原生图片资源
4.使用本地文件系统中的资源
5.使用图片的技巧

使用静态图片资源


import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';



export default class ImageTest extends Component {
    // render()是为了渲染UI层次，必须调用的函数
    render() {

        // 使用静态图片资源

        return <View>

            <Image
                style={{width:200, height:100,borderWidth:1}}
                source={require('./dianzan.png')} // 图片默认的大小是原图片尺寸的大小
                resizeMode={'center'} // 图片的模式: 拉伸、平铺、裁剪等
            />
        </View>
    }
}

使用网络图片资源


import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';



export default class ImageTest extends Component {
    // render()是为了渲染UI层次，必须调用的函数
    render() {

        // 使用静态图片资源

        return <View>

            <Image
                style={{width:200, height:100,borderWidth:1}}
                source={require('./dianzan.png')} // 图片默认的大小是原图片尺寸的大小
                resizeMode={'center'}
            />
            <Image
                style={{width:100, height:100,borderWidth:1}}
                source={{url:'http://img4.imgtn.bdimg.com/it/u=1811457400,1412920344&fm=27&gp=0.jpg'}} // 加载网络图片需要定义好图片的宽度和高度react-native没办法自动添加
            />
            </View>
    }
}

如何使用原生图片资源

1.在react-native中加载网络图片和加载原生图片都没办法自行渲染，需要手动设置大小
2.将图片导入android与iOS项目中


import React,{ Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';



export default class ImageTest extends Component {
    // render()是为了渲染UI层次，必须调用的函数
    render() {

        // 使用静态图片资源

        return <View>

            <Image
                style={{width:200, height:100,borderWidth:1}}
                source={require('./dianzan.png')} // 图片默认的大小是原图片尺寸的大小
                resizeMode={'center'}
            />
            <Image
                style={{width:100, height:100,borderWidth:1}}
                source={{url:'http://img4.imgtn.bdimg.com/it/u=1811457400,1412920344&fm=27&gp=0.jpg'}} // 加载网络图片需要定义好图片的宽度和高度react-native没办法自动添加
            />
            <Image
                style={{width:100, height:100,borderWidth:1}}
                source={{url:'fenxiang'}} // 加载原生图片只需要加载原生图片中图片的名字
            />
            </View>
    }
}

基础知识，继续关注中...

最后编辑于：2018.03.26 15:12:37

?著作权归作者所有,转载或内容合作请联系作者

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,100评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,308评论 3赞 388
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事?！?“怎么了？”我有些...
开封第一讲书人阅读 159,718评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,275评论 1赞 287
?港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,376评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,454评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,464评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,248评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,686评论 1赞 306
?护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,974评论 2赞 328
?白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,150评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,817评论 4赞 337
?日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,484评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,140评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,374评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,012评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,041评论 2赞 351

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

认识ReactNative

认识ReactNative

到这一步如果都是成功的，说明你的react-native已经安装成功了

自定义创建组件的三种方式:

React Native 组件的生命周期

推荐阅读更多精彩内容

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

认识ReactNative

到这一步如果都是成功的， 说明你的react-native已经安装成功了

自定义创建组件的三种方式:

React Native 组件的生命周期

推荐阅读更多精彩内容

到这一步如果都是成功的，说明你的react-native已经安装成功了