ReactNative Props、States、获取屏幕尺寸、

2019-07-26  本文已影响0人  遛遛食

Props

一般用在自定义组件的时候,内部需要传递参数时使用。

自定义组件:this.props.key中key就是外部组件在使用时传递参数的key
使用时:<自定义组件名 key='value'> value就是传递的参数

class Greeting extends Component {
  render() {
    return (
      <Text>this.props.name=={this.props.name}</Text>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

注意:父子控件传递参数时也使用this.props.key来传递。

State

作用:类似于全局的静态变量,想修改某个属性,就修改界面,就需要用state。
初始化、定义state属性:

方法一:
    constructor(props){
        super(props);
        this.state = {
            currentIndex: 0,
        }
    }
方法二:
    state = {
        currentIndex: 0,
    }

修改state属性

this.setState({
      num : numberValue
  });

注意:
this.state定义一般写在constructor方法中

获取屏幕尺寸:

const Dimenis = require('Dimensions');
const {width, height, scale} = Dimensions.get('window');

显示变量:
<Text>{width}</Text>
<Text>{height}</Text>
<Text>{scale}</Text>

获取DOM元素:

使用ref来进行DOM元素的获取

//声明
<View ref='name'></View>

//获取
this.refs.name
上一篇下一篇

猜你喜欢

热点阅读