React-Native基础知识

作者: Andy0528 | 来源:发表于2017-09-25 01:21 被阅读8次

1. 组件的导入导出

1.1 组件的导出

组件的导出使用关键字export default

/**
*  UIComponent.js文件
*/
import React, { Component } from 'react';
import {View, StyleSheet } from 'react-native';

export default class UIComponent extends Component {
    render() {
        return (
            <View style={styles.content}></View>
        );
    }
}

const styles = StyleSheet.create({
    content: {
        width: 200,
        height: 200,
        backgroundColor: 'orange',
        margin: 50
    }
});

1.2 组件的导入

组件的导入使用import

import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text,View} from 'react-native';
import UIComponent from './UIComponent';

export default class ReactDemo extends Component {
  render() {
    return (
      <UIComponent />
    );
  }
}

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

2. 常量、变量、函数的导入导出

2.1 导出

使用关键字export

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

var name = '张三';
var age = 18;

export { name, age, sum }

export default class UIComponent extends Component {
    render() {
        return (
            <View style={styles.content}></View>
        );
    }
}

const styles = StyleSheet.create({
    content: {
        width: 200,
        height: 200,
        backgroundColor: 'orange',
        margin: 50
    }
});

function sum(x, y) {
    return x + y;
}

2.2 导入

导入使用关键字import

import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text,View} from 'react-native';
import UIComponent, { name, age, sum } from './UIComponent';

export default class ReactDemo extends Component {
  render() {
    return (
      <View>
      <UIComponent />
        <Text style={{fontSize: 24, color: 'blue'}}>姓名： {name}</Text>
        <Text style={{fontSize: 24, color: 'blue'}}>年龄： {age}</Text>
        <Text style={{fontSize: 24, color: 'blue'}}>3 + 2 = {sum(3, 2)}</Text>
      </View>
    );
  }
}

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

3. Props(属性)

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props, 只需要在组件中使用this.props即可，Props 是由上个组件传递过来或者本组件定义的默认属性

3.1 上个页面传递过来的属性

/**
*UIComponent.js
*/
import React, { Component } from 'react';
import {View, StyleSheet, Text } from 'react-native';

export default class UIComponent extends Component {
    render() {
        return (
            <View style={styles.content}>
                <Text style={styles.text}>Hello {this.props.name}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    content: {
        width: 200,
        height: 200,
        backgroundColor: 'orange',
        marginTop: 10,
        marginLeft: 50
    },
    text: {
        fontSize: 24,
        color: 'blue'
    }
});

/**
*  入口文件  
*/
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text,View} from 'react-native';
import UIComponent from './UIComponent'

export default class ReactDemo extends Component {
  render() {
    return (
      <View>
        <UIComponent name = "JavaScript"/>
        <UIComponent name = "Objective-C"/>
        <UIComponent name = "Java" />
      </View>
    );
  }
}

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

3.2 定义默认属性

当上一个页面没有传递属性时，使用默认的属性(传递过来的属性优先级高于默认属性)，使用关键字static defaultProps

/**
*UIComponent.js
*/
import React, { Component } from 'react';
import {View, StyleSheet, Text } from 'react-native';

export default class UIComponent extends Component {

    static defaultProps = {
        name: 'World'
    }

    render() {
        return (
            <View style={styles.content}>
                <Text style={styles.text}>Hello {this.props.name}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    content: {
        width: 200,
        height: 200,
        backgroundColor: 'orange',
        marginTop: 10,
        marginLeft: 50
    },
    text: {
        fontSize: 24,
        color: 'blue'
    }
});

3.3 属性的类型检查

为了保证类型的正确性，react-native引入了类型检查,使用关键字static propTypes,由于PropTypes是react包中的，所以需要在react包中引入

/**
*UIComponent.js
*/
import React, { Component, PropTypes } from 'react';
import {View, StyleSheet, Text } from 'react-native';

export default class UIComponent extends Component {

    static defaultProps = {
        name: 'World',
    }

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number,
        sex: PropTypes.string.isRequired,
    }

    render() {
        return (
            <View style={styles.content}>
                <Text style={styles.text}>姓名： {this.props.name}</Text>
                <Text style={styles.text}>年龄: {this.props.age}</Text>
                <Text style={styles.text}>年龄: {this.props.sex}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    content: {
        width: 200,
        height: 200,
        backgroundColor: 'orange',
        marginTop: 10,
        marginLeft: 50
    },
    text: {
        fontSize: 24,
        color: 'blue'
    }
});

/**
* 入口文件
*/
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text,View} from 'react-native';
import UIComponent from './UIComponent'

export default class ReactDemo extends Component {
  render() {
    var params = {name: '李四', age: 18, sex: '男'};
    return (
      <View>
        <UIComponent {...params}/>
      </View>
    );
  }
}

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

//ES6 解构赋值
/**
* 入口文件
*/
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text,View} from 'react-native';
import UIComponent from './UIComponent'

export default class ReactDemo extends Component {
  render() {
    var params = {name: '李四', age: 18, sex: '男'};
    var {name, sex} = params;
    return (
      <View>
        <UIComponent 
          name={name} 
          sex = {sex}
        />
      </View>
    );
  }
}

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

4. state(状态)

我们使用两种数据来控制组件state、props, props是父组件中指定的，一经指定，在组件的生命周期中不会改变，对于需要改变的数据需要使用state, 通常在constructor中初始化state, 需要改变的时候调用this.setState方法

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

export default class StateTest extends Component {
    constructor(props) {
        super(props);

        this.state = {
            size: 80
        }
    }

        render() {
            return (
                    <Text 
                        style={styles.text} 
                        onPress = {() => {
                                this.setState({
                                    size: this.state.size + 20
                                });
                            }
                        }>{this.state.size}</Text>
                );
            }
}

const styles = StyleSheet.create({
    text: {
        width: 100,
        height: 100,
        fontSize: 30,
        backgroundColor: 'blue',
        color: 'orange',
    }
});

5. ref

ref是组件的一个特殊属性，页面被渲染后指向页面的一个引用。通过这个引用来获取真实的组件。

react-native 中的组件并不是真正的DOM，它是存在于内存中的一种数据结构(虚拟DOM),只有在它插入文档以后才会变成真正的DOM,所有DOM的变动都会发生在虚拟DOM上，再将实际发生变动的部分反映在真正的DOM上，这种算法可以极大的提高页面性能的表现.

/**
*  RefTest.js文件
*/
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';


export default class RefTest extends Component {
    constructor(props)
    {
        super(props);
        this.state = {
            size: 80,
        }
    }

    getSize() {
        return this.state.size;
    }

    render() 
    {
        return (
                <Text 
                    style={styles.text} 
                    // 点击事件
                    onPress = {() => {
                            this.setState({
                                size: this.state.size + 20
                            });
                        }
                    }
                >{this.state.size}</Text>
            );
        }
}

const styles = StyleSheet.create({
    text: {
        width: 200,
        height: 200,
        backgroundColor: 'blue',
        fontSize: 30,
        color: 'white',
        textAlign: 'center',
        lineHeight: 200
    }
});


/**
* 入口文件
*/
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text,View} from 'react-native';
import RefTest from './RefTest'

export default class ReactDemo extends Component {

  constructor(props) 
  {
    super(props);
    this.state = {
      size: 0,
    }
  }

  render() {
     
    return (
      <View>
        <Text 
          style = {{marginTop: 30, fontSize: 50}}
          onPress = {
            () => {
              var size = this.refs.reftest.getSize();
              this.setState({
                size: size,
              });
            }
          }
        >利用ref获取值: {this.state.size}</Text>
        <RefTest
          ref="reftest" />
      </View>
      );
  }
}

思路: 首先为RefTest组件定义了一个ref属性，当render方法被调用后组件被渲染, 就可以通过this.refs.reftest来获取这个组件的实例，然后通过这个实例来调用这个组件的方法或者变量
注意: 为什么是refs，因为还有其他组件也有这个属性，这里获取的是一个数组。

//类
export default class Student {
    constructor(name, sex, age)
    {
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    //定义方法 
    getDescription() 
    {
        return '年龄: ' + this.name + '\n性别:' + this.sex + '\n年龄:' + this.age;
    }
}

/**
* 入口文件
*/
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text,View} from 'react-native';
import Student from './Student'

export default class ReactDemo extends Component {
  constructor()
  {
    super();
    this.stu = new Student('小红', '女', 18);
  }
  render() 
  {
    return(
        <Text
          style={{fontSize: 30, color: 'blue', margin: 50}}
        >{this.stu.getDescription()}</Text>
      );
  }
}

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

6.1 类的继承

import Student from './Student'
export default class MingStudent extends Student {
    constructor(name, sex, age) 
    {
        super(name, sex, age);
    }
    //重构父类方法
    getDescription()
    {
        return super.getDescription();
    }
}

/**
* 入口文件
*/
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text,View} from 'react-native';
import MingStudent from './MingStudent'

export default class ReactDemo extends Component {
  constructor()
  {
    super();
    this.stu = new MingStudent('小明','男',18);
  }
  render() 
  {
    return(
        <Text
          style={{fontSize: 30, color: 'blue', margin: 50}}
        >{this.stu.getDescription()}</Text>
      );
  }
}

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

React-Native基础知识

1. 组件的导入导出

2. 常量、变量、函数的导入导出

3. Props(属性)

4. state(状态)

5. ref

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读