reactnative props用法
组件定义每个单词的首字母要大写
在APP.js里调用
import PropsTest from './propsTest';
以及在render函数里调用子组件
render() {
return (
<View style={styles.container}>
<PropsTest
name="熊爱明"
/>
</View>
);
}
在子组件里申明
export default class PropsTest extends Component{
render () {
return <Text style={
{
fontSize:20,backgroundColor:'red'}}>Hello+{
this.props.name}</Text>
}
}
传递默认属性
在propsTest.js
别忘记加
static修饰符
export default class PropsTest extends Component{
设置默认属性
static defaultProps={
name:'小红'}
render () {
return <Text style={
{
fontSize:20,backgroundColor:'red'}}>Hello+{
this.props.name}</Text>
}
}
前提没有在APP.js里申明变量
对变量的属性检查
首先先下载
npm install prop-types —save字体库包
引入
import PropsTest from './propsTest';
static propTypes={
name:String
}
static propTypes={
name:String,
age:Number,
sex:PropTypes.string.isRequired
}
<Text style={
{
fontSize:20,backgroundColor:'red'}}>Hello+{
this.props.sex}</Text>
延展操作符
var p={
name:'王依米',
age:16,
sex:'女'}
return (
<View style={styles.container}>
<PropsTest
name={p.name}
age={p.age}
sex={p.sex}
// name='王依米'
// age={16}
// sex='女'
/>
</View>
);
}
var p={
name:'王依米',
age:16,
sex:'女'}
return (
<View style={styles.container}>
<PropsTest
//延展操作符
{...p}
// name={p.name}
// age={p.age}
// sex={p.sex}
// name='王依米'
// age={16}
// sex='女'
/>
</View>
);
}
{...p} 一下就把属性传递过去了
{
/*{...p}*/}不是被注销的意思
state的应用
export default class State extends Component{
state ={
size:80
}
constructor (props) {
super(props);
}
render () {
return (
<View>
<Text
style={
{
fontSize:20}}
onPress={() =>{
this.setState({
size:this.state.size+10
})
}}
>吹</Text>
<Text
style={
{
fontSize:20}}
onPress={() =>{
this.setState({
size:this.state.size-10
})
}}
>fang</Text>
<Image style={
{ width:this.state.size,height:this.state.size}}
source={require('./timg.jpg')} />
</View>)
http://www.devio.org博客
还没有评论,来说两句吧...