React Native 学习笔记（四）-- State和Props

Part One

Image组件的自带属性

Part Two

自定义组件并添加属性

import React, { Component } from 'react';
import {
Text } from 'react-native';
/**
* 下面我们自定义一个组件Greeting 并指定一个属性名为name
*/
class Greeting extends Component {
render() {
return (
// this.props.name 说明我们指定的是一个Props,名字是name
<Text>Hello {this.props.name}!</Text>
);
}
}

使用自定义组件并给属性赋值

import React, { Component } from 'react';
import {
AppRegistry,
Text,
View
} from 'react-native';
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
// 注意下面的这个属性赋值的时候没有用{}括起来，是因为字符串背身就是一个对象，''标识JavaScript是支持的，外面加上{}也是一样的，比如最后加上一行
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
<Greeting name={'Valeera'} />
</View>
);
}
}

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

第一步：

第二步：

module.exports = Greeting;

第三步：

var Greeting = require('./Greeting');
// ES6写法
// let Greeting = require('./Greeting');

import React, { Component } from 'react';
import {
Text } from 'react-native';
/**
* 下面我们自定义一个组件Greeting 并指定一个属性名为name
*/
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
/*
* 下面这是最重要的一行
*/
module.exports = Greeting;

import React, { Component } from 'react';
import {
AppRegistry,
Text,
View
} from 'react-native';
// 使用自定义的组件
let Greeting = require('./Greeting');
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}

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

Part Three

module.exports = Gretting;

let Blink = require('./Greeting');

var Component = {
自定义组件1:require('./BorderBtn/BorderBtn');
自定义组件2:require('./YYNewTopBar/YYNewTopBar');
}
// 然后把main.js中管理我们自定义组件的Component暴露出去
module.exports = Component;

Part Four

// 这也是一个index.android.js文件。这里我们就不拆分这个JS文件了，直接分析这个示例
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
constructor(props) {
super(props);
// 这里定义一个state名为showText默认值是true
this.state = { showText: true };

// 每1000毫秒对showText状态做一次取反操作,相当于一个定时器
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}

render() {
// 根据当前showText的值决定是否显示text内容，这行代码相当于Java中的三目运算
let display = this.state.showText ? this.props.text : ' ';
return (
// 这里通过一个变量去显示一个属性text，通过上面的this.props.text来指定具体显示的是什么内容，和上面的例子相比就是通过定义了一个变量的方式接收了一下这个属性值而已
<Text>{display}</Text>
);
}
}

class BlinkApp extends Component {
render() {
return (
// 使用组件 并 给属性text赋值
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}

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

资料