ReactNative学习笔记(从基本概要到控件间传值)

ReactNative学习笔记1.1

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
 // 1.加载组件(面向组件开发) , React框架(这个框架用的是JSX语法)
/**
 * React是默认组件不用添加{} , Component为非默认组件需要添加{}~
 */
import React, { Component } from 'react';

// 2.加载常用组件(样式表组件 , Text组件 , View组件 , 注册组件等)
/**
 * 常用组件全部都为非默认组件都需要加在{}里面~
 */
import {
    StyleSheet,
    Text,
    View,
    AppRegistry,
} from 'react-native';


// 3.自定义程序入口组件:
export default class ReactDemo extends Component {
    // 当一个组件要显示要初始化的时候会自动调用 , 这个方法不需要程序员主动调用!
    render () {
        // 当需要包装 HTML 组件标签的时候需要用 () 来包装
        var str = 'Hello World !'
        return (
            //style = 这是一个表达式 , 表达式也需要加{}来包装~
            <View style = {styles.mainStyle}>
                <Text style = {styles.TextStyle}>  
                    {str} 
                </Text>
            </View>
        )
    }
}

// 4.创建一个样式表 ,用来描述这个组件的样子! 组件的外观 , 颜色等...
// create方法里面需要传递一个对象 , 在JS中对象都需要用 {} 来包装~
var styles = StyleSheet.create({
    mainStyle: {
        flex:1,
        backgroundColor:'red',
    },
    TextStyle: {
        marginTop:20,
    }
})

// AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

ReactNative学习笔记1.2

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

import React, { Component } from 'react';

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

/**
 * 程序入口函数:
 * 
 */
export default class ReactDemo extends Component {
    render () {
        return (
            <View style = {styles.mainStyle}>
                <CustomerView name = '哈哈' age = {27}/>
                <MoneyView name = '苗冬'/>
            </View>
        )
    }
}


/**
 * 自定义组件:
 * 
 */
// 每个组件都有一个props属性 , 这算是一个属性的容器 , 所有的属性都放在这里面 , 可以通过this.props.XXX拿到自定义视图中的属性!
// 在JS中 , 属性不是一开始统一写好的 , 而是在使用的过程中动态的实现的!
// props在组件内部不能修改 , 只能放到组件的外部 , 也就是调用该组件的地方去修改!
class CustomerView extends Component {
    render () {
        return (
            <View style = {styles.customerViewStyle}>
                <Text>
                    名称:{this.props.name }
                    年龄:{this.props.age}
                </Text>
            </View>
        )
    }
}



/**
 * 自定义组件:
 * 
 */
//显示我所有的工资:
class MoneyView extends Component {
    // 更新金钱:
    updateMoney() {
        // 如果不进行bind绑定操作 , 在更新金钱的方法里拿不到this.state , 
        // 断点会显示: undefined(未定义)!
        // 所以:是这里出了问题!
        var money = this.state.money;
        money += 1000;
        // 给状态机变量money重新赋值 , 这样会重新调用render方法渲染视图!
        this.setState ({
            money:money,
        });
        console.log(this.state.money);
    }

    // 组件构造初始化方法:
    constructor (props) {
        super (props);
        // 定义状态机变量在 constructor 构造函数中写:
        this.state = {
            money:0,
            age:1,
        }              
        // 设置定时器(需要执行的操作(函数) , 间隔多少毫秒):
        // setInterval(this.updateMoney.bind(this) , 1000);
        // 这里的绑定 this 这个 this 指的就是MoneyView;
        // 让MoneyView去执行 updateMoney 方法!
        setInterval(this.updateMoney.bind(this) , 1000);
    }

    // 渲染:
    render () {
        return (
            <View style = {styles.moneyViewStyle}>
                <Text>共有 + {this.state.money}元</Text>
                <Text>我是:{this.props.name}</Text>
            </View>
        )
    }
}


/**
 * 样式表:
 * 
 */
var styles = StyleSheet.create({
    mainStyle: {
        flex:1,
        backgroundColor:'red',
        flexDirection:'row',
        marginTop:20,
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center',
    },
    customerViewStyle: {
        height:100,
        width:100,
        backgroundColor:'yellow',
        justifyContent:'center' , 
        alignItems:'center',
    },
    moneyViewStyle: {
        height:100,
        width:100,
        backgroundColor:'white',
    },
    
})

// AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

ReactNative学习笔记1.3

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

import React, { Component } from 'react';

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

/**
 * 程序入口函数:
 * 
 */
export default class ReactDemo extends Component {
    render () {
        return (
            <View style = {styles.mainStyle}>
                <CustomerView name = '哈哈' age = {27}/>
                <MoneyView name = '苗冬'/>
            </View>
        )
    }
}


/**
 * 自定义组件:
 * 
 */
// 每个组件都有一个props属性 , 这算是一个属性的容器 , 所有的属性都放在这里面 , 可以通过this.props.XXX拿到自定义视图中的属性!
// 在JS中 , 属性不是一开始统一写好的 , 而是在使用的过程中动态的实现的!
// props在组件内部不能修改 , 只能放到组件的外部 , 也就是调用该组件的地方去修改!
class CustomerView extends Component {
    render () {
        return (
            <View style = {styles.customerViewStyle}>
                <Text>
                    名称:{this.props.name }
                    年龄:{this.props.age}
                </Text>
            </View>
        )
    }
}



/**
 * 自定义组件:
 * 
 */
//显示我所有的工资:
class MoneyView extends Component {
    // 更新金钱:
    updateMoney() {
        // 如果不进行bind绑定操作 , 在更新金钱的方法里拿不到this.state , 
        // 断点会显示: undefined(未定义)!
        // 所以:是这里出了问题!
        var money = this.state.money;
        money += 1000;
        // 给状态机变量money重新赋值 , 这样会重新调用render方法渲染视图!
        this.setState ({
            money:money,
        });
        console.log(this.state.money);
    }

    // 组件构造初始化方法:
    constructor (props) {
        super (props);
        // 定义状态机变量在 constructor 构造函数中写:
        this.state = {
            money:0,
            age:1,
        }              
        // 设置定时器(需要执行的操作(函数) , 间隔多少毫秒):
        // setInterval(this.updateMoney.bind(this) , 1000);
        // 这里的绑定 this 这个 this 指的就是MoneyView;
        // 让MoneyView去执行 updateMoney 方法!
        setInterval(this.updateMoney.bind(this) , 1000);
    }

    // 渲染:
    render () {
        return (
            <View style = {styles.moneyViewStyle}>
                <Text>共有 + {this.state.money}元</Text>
                <Text>我是:{this.props.name}</Text>
            </View>
        )
    }
}


/**
 * 样式表:
 * 
 */
var styles = StyleSheet.create({
    mainStyle: {
        flex:1,
        backgroundColor:'red',
        flexDirection:'row',
        marginTop:20,
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center',
    },
    customerViewStyle: {
        height:100,
        width:100,
        backgroundColor:'yellow',
        justifyContent:'center' , 
        alignItems:'center',
    },
    moneyViewStyle: {
        height:100,
        width:100,
        backgroundColor:'white',
    },
    
})

// AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

ReactNative学习笔记1.4 - 正向传值

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

import React, { Component } from 'react';

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

/**
 * 程序入口函数:
 * 
 */
export default class ReactDemo extends Component {
    render () {
        return (
            <View style = {styles.mainStyle}>
                <Father />
            </View>
        )
    }
}


// 父控件:
class Father extends Component {
    sendMoney () {
        // 3.拿到子控件:
        var son = this.refs.reference;
        // 4.拿到状态机变量:money:
        var moneyState = son.state.moneyState;
        // 5.做一些变化:
        moneyState += 100;
        // 6.重新给状态机变量赋值:
        son.setState ({
            moneyState:moneyState,
        });
        console.log(moneyState);
    }

    // 1.这里先定义一个props.money = 100 的初始值:
    render () {
        return (
            <View style = {styles.fatherStyle}>
                <Text onPress = {this.sendMoney.bind(this)}>给零花钱</Text>
                <Son ref = 'reference' sonName = '儿子' money = {100}/>
            </View>
        )
    }
}


// 子控件:
class Son extends Component {
    // 2.子控件中拿到自己子控件定义的属性:props.money
    // 并且把属性作为给子控件的状态机变量moneyState的初值:
    constructor (props) {
        super(props);
        this.state = {
            moneyState: this.props.money,
        };
    }


    // 这样 就能通过 this.state.moneyState 拿到每次点击后的金钱.
    // 状态机变量一变化天然就会调用render方法 , 也就会立即刷新UI了!
    render () {
        return (
            <View style = {styles.sonStyle }>
                <Text style = {styles.textStyle}>
                    {this.props.sonName}
                </Text>
                <Text style = {styles.textStyle}>
                    收到 - {this.state.moneyState} - 元零花钱
                </Text>
            </View>

        )
    }
}


/**
 * 样式表:
 * 
 */
var styles = StyleSheet.create({
    mainStyle: {
        flex:1,
        backgroundColor:'white',
        flexDirection:'row',
        marginTop:20,
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center',
    },
    
    fatherStyle: {
        width:200,
        height:400,
        backgroundColor:'orange',
        justifyContent:'center' , 
        alignItems:'center',
    },
    sonStyle: {
        width:200,
        height:200,
        backgroundColor:'green',
        justifyContent:'center' , 
        alignItems:'center',
    },
    textStyle: {
        justifyContent:'center' , 
        alignItems:'flex-start',
    },
    

})

AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

ReactNative学习笔记1.5 - 反向传值

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

/**
 * 反向传值:子控件传值给父控件:
 * 
 */
import React, { Component } from 'react';

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

export default class ReactDemo extends Component {
    render () {
        return (
            <View style = {styles.mainStyle}>
                <Father fatherName = '父控件'/>
            </View>
        )
    }
}

// 父控件:
class Father extends Component {
    // 构造方法:
    constructor (props) {
        super(props);
        this.state = {
            money:0,
            age:27,
        };
    }
    // 爸爸定义一个收到钱的方法:
    // 别人给我传递了一个money变量 , 
    // 我接收 , 并且把这个接收到的money变量赋值给我的状态机变量
    // 用this.setState方法(设置状态)
    receiveMoney (money , age) {
        var m = this.state.money;
        // 每一次增加一个money:
        m += money;
        this.setState ({
            money:m,
            age:age,
        })
    }
    render () {
        return (
            // 把父亲获取到钱的方法通过属性来传递给儿子:
            <View style = {styles.fatherStyle}>
                <Son sonName = '子控件' getMoney = {this.receiveMoney.bind(this)}/>
                <Text>收到儿子{this.state.money}元钱</Text>
                <Text>年龄{this.state.age}岁</Text>                
            </View>
        )
    }
}

// 子控件:
class Son extends Component {
    // 点击时调用传递金钱的方法:
    sendMoney() {
        // 在点击的方法里面调用这个方法给属性赋值一个100:
        // 子控件这个属性里面存储的是一个方法 , 传递的参数也是根据这个方法来匹配的!
        this.props.getMoney(100 , 28);
    }
    render () {
        return (
            <View style = {styles.sonStyle }>
                <Text>{this.props.sonName}</Text>
                    <Text onPress = {this.sendMoney.bind(this)}>点击按钮给爸爸钱</Text>       
                </View>
            )
        }
}

// 样式表:
var styles = StyleSheet.create({
    mainStyle: {
        flex:1,
        backgroundColor:'white',
        flexDirection:'row',
        marginTop:20,
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center',
    },
    
    fatherStyle: {
        width:200,
        height:400,
        backgroundColor:'orange',
        justifyContent:'center' , 
        alignItems:'center',
    },
    sonStyle: {
        width:200,
        height:200,
        backgroundColor:'green',
        justifyContent:'center' , 
        alignItems:'center',
    },
    textStyle: {
        justifyContent:'center' , 
        alignItems:'flex-start',
    },
})

AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

ReactNative学习笔记1.6 - 无关联的两个控件之间传值

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

/**
 * 反向传值:子控件传值给父控件:
 * 
 */
import React, { Component } from 'react';

import {
    StyleSheet,
    Text,
    View,
    AppRegistry,
    DeviceEventEmitter, //通知
} from 'react-native';

export default class ReactDemo extends Component {
    render () {
        return (
            <View style = {styles.mainStyle}>
                <BrotherGe brotherGeName = '哥哥控件'/>
                <BrotherDi brotherDiName = '弟弟控件'/>
                
            </View>
        )
    }
}

// 哥哥控件:
class BrotherGe extends Component {
    // 给弟弟钱:
    sendMoneyMethod () {
        //传值:
        DeviceEventEmitter.emit('sendMoney' , 100 , 20);
    }
    render () {
        return (
            // 把父亲获取到钱的方法通过属性来传递给儿子:
            <View style = {styles.brotherGeStyle}>
                <Text>{this.props.brotherGeName}</Text>
                <Text onPress = {this.sendMoneyMethod.bind(this)}>点击按钮给弟弟钱</Text>
            </View>
        )
    }
}

// 弟弟控件:
class BrotherDi extends Component {
    // 获得金钱:
    getMoneyMethod(money , age) {
        var m = this.state.money;
        m += money;
        this.setState({
            money:m,
            age:age,
        })
    }
    
    constructor (props) {
        super(props);
        this.state = {
            money: 0,
            age:19,
        }
        //添加监听者:
        DeviceEventEmitter.addListener('sendMoney' , this.getMoneyMethod.bind(this));

    }
    render () {
        return (
            <View style = {styles.brotherDiStyle}>
                <Text>{this.props.brotherDiName}</Text>
                <Text>收到哥哥 {this.state.money} 元钱</Text>
                <Text>弟弟 {this.state.age} 岁</Text>                
            </View>
            )
        }
}

// 样式表:
var styles = StyleSheet.create({
    mainStyle: {
        flex:1,
        backgroundColor:'white',
        flexDirection:'row',
        marginTop:20,
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center',
    },
    
    brotherGeStyle: {
        width:200,
        height:200,
        backgroundColor:'orange',
        justifyContent:'center' , 
        alignItems:'center',
    },
    brotherDiStyle: {
        width:200,
        height:200,
        backgroundColor:'green',
        justifyContent:'center' , 
        alignItems:'center',
    },
    textStyle: {
        justifyContent:'center' , 
        alignItems:'flex-start',
    },
})

AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

愿编程让这个世界更美好

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

推荐阅读更多精彩内容