美文网首页
ReactNative学习笔记(从基本概要到控件间传值)

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

作者: 小苗晓雪 | 来源:发表于2018-03-06 14:31 被阅读34次

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

愿编程让这个世界更美好

相关文章

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

    ReactNative学习笔记1.1 ReactNative学习笔记1.2 ReactNative学习笔记1.3 ...

  • React专题4: 组件间通信

    父控件 传值 给子控件, 父控件可以将值 赋给子控件的一个属性(属性赋值)子控件 传值 给父控件, 需要父控件将自...

  • H5

    ReactNative快速入门笔记 如果运行报错，可以文章最后找寻解决方案。 首先需要了解一些基本的React的概...

  • 多界面传值

    1. 基本概念 页面传值有多种方式，今天学的是通过属性传值和代理传值。属性传值就是通过一个按钮或者其他的控件加上触...

  • react-native 组件传值

    顺传通过props传值 举个?：父控件给子控件传递一个name属性的值，子控件展示父控件传递过来的值： // 子组...

  • [学习笔记]_iOS代理基本使用，界面间传值

    参考链接： 你真的了解iOS代理设计模式吗？ iOS开发－Protocol协议及委托代理（Delegate）传值 ...

  • 学习笔记—Android 控件架构与自定义控件

    《Android 群英传》第三章 “ Android 控件架构与自定义控件详解 ” 学习笔记 Android控件...

  • Vue 父子组件传值

    一 、 向下传值（父传子） 注意: 传值方式为[：子控件属性= 父控件数据]子控件接收： 二 、 向上传值（父...

  • 页面传值-03

    一、传值分类 页面传值基本分为两种：正向传值和反向传值。 二、传值方式 传值，最基本的无非就是代理传值、通知传值、...

  • iOS 页面（代理、通知、block、单例、属性）传值

    一、传值分类 页面传值基本分为两种：正向传值和反向传值。 二、传值方式 传值，最基本的无非就是代理传值、通知传值、...

网友评论

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

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|ReactNative学习笔记(从基本概要到控件间传值)|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！