原文地址:http://reactnative.cn/docs/0.31/props.html#content
1. property:
如下代码所示
import React, { Component } from ‘react‘;
import { AppRegistry, Image } from ‘react-native‘;
class Bananas extends Component {
render() {
let pic = {
uri: ‘https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg‘
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
AppRegistry.registerComponent(‘Bananas‘, () => Bananas);
上面 <>中间包裹的对象,source={ xxx } 其中source就是图片的属性,代表它的源地址. 类似于HTML中src="http://..."后面{}中间标示的是属性的value(值)。通过后面style={} 属性推测,里面{}中间的value因该是存在属性变量或者对象。
{{width: 193, height: 110}} 里面有点类似于一个json数据,也可以理解为一个表达式。 因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
我们自定义组件也可以使用props(property),通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴,只需在render函数中引用this.props,然后按需处理。 举个栗子: import React,{Component }from ‘react’; import {AppRegister,Text,View} form ‘react-native‘; class Greeting extends Component { render() ( return (<text>hello {this.props.name}!</text> ); } }
class LotsOfGreetings extends Component { render() { return( <View style={{alignItems:‘center‘}}> <Greeting name = ‘Rexxar‘/> <Greeting name = ‘Jaina‘/> <Greeting name = ‘Valeera‘/> ); } }
AppRegistry.registerComponent(‘LotsOfGreetings‘,()=>
LotsOfGreetings
); 2. State: 如果需要在constuctor中国年初始化state,需要在修改时调用setState方法。 示例,闪烁文字效果。 文字内容可以在组件创建时指定,所以对应文字的隐藏和闪烁状态是随着时间变化的。 import React,{ component } from ‘react‘; import {AppRegistry,Text,View} from ‘react-native‘;
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ‘ ‘;
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component {
render() {
return (
<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);
3. 样式
后设置的样式会比先设置的样式优先级高import React, { Component } from ‘react‘;
import { AppRegistry, StyleSheet, Text, View } from ‘react-native‘;
class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: ‘blue‘,
fontWeight: ‘bold‘,
fontSize: 30,
},
red: {
color: ‘red‘,
},
});
AppRegistry.registerComponent(‘LotsOfStyles‘, () => LotsOfStyles);
常见的做法是按顺序声明和使用style
属性,以借鉴CSS中的“层叠”做法(即后声明的属性会覆盖先声明的同名属性)。
4. 宽度与高度
可以将其定义为style属性,在{}中写成json格式字符串。 可以通过点语法,定义内连样式。
import React, { Component } from ‘react‘;
import { AppRegistry, View } from ‘react-native‘;
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: ‘powderblue‘}} />
<View style={{width: 100, height: 100, backgroundColor: ‘skyblue‘}} />
<View style={{width: 150, height: 150, backgroundColor: ‘steelblue‘}} />
</View>
);
}
};
// 注册应用(registerComponent)后才能正确渲染
// 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent(‘AwesomeProject‘, () => FixedDimensionsBasics);
5. 弹性样式 flex=1,组件占据整个剩余空间,如果有多个组件,name这些组件平分剩余空间。
import React, { Component } from ‘react‘;
import { AppRegistry, View } from ‘react-native‘;
class FlexDimensionsBasics extends Component {
render() {
return (
// 试试去掉父View中的`flex: 1`。
// 则父View不再具有尺寸,因此子组件也无法再撑开。
// 然后再用`height: 300`来代替父View的`flex: 1`试试看?
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: ‘powderblue‘}} />
<View style={{flex: 2, backgroundColor: ‘skyblue‘}} />
<View style={{flex: 3, backgroundColor: ‘steelblue‘}} />
</View>
);
}
};
AppRegistry.registerComponent(‘AwesomeProject‘, () => FlexDimensionsBasics);
6. 使用Flexbox进行布局:
Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
一般来说,使用flexDirection
、alignItems
和 justifyContent
三个样式属性就已经能满足大多数布局需求。
React Native中的Flexbox的工作原理和web上的CSS基本一致,当然也存在少许差异。首先是默认值不同:flexDirection
的默认值是column
而不是row
,alignItems
的默认值是stretch
而不是flex-start
,以及flex
只能指定一个数字值。
在组件的style
中指定flexDirection
可以决定布局的主轴。子元素是应该沿着水平轴(row
)方向排列,还是沿着竖直轴(column
)方向排列呢?默认值是竖直轴(column
)方向。 <View style={{flex: 1, flexDirection: ‘row‘}}>
justifyContent可以决定其子元素沿着主轴的排列方式, flex-start,center,flex-end,space-around以及space-bettween.
在组件的style中指定alignItems
可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row
,则次轴方向为column
)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start
、center
、flex-end
以及stretch
。
时间: 2024-10-12 16:00:19