鱼C论坛

 找回密码
 立即注册
查看: 2577|回复: 0

[技术交流] 用RN制作手机app之用props关键字传值

[复制链接]
发表于 2017-8-6 08:13:28 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
还继续修改昨天的代码
  1. import React, { Component } from 'react';
  2. import {
  3.   AppRegistry,
  4.   View,
  5.   StyleSheet,
  6.   ScrollView
  7. } from 'react-native';
  8. import Pic from './test.js'
  9. var data=[{
  10.         name:require('./image/a.jpg'),
  11.         text:'picture1'
  12. },
  13. {
  14.         name:require('./image/b.jpg'),
  15. }
  16. ]
  17. export default class myreact extends Component {
  18.   render() {
  19.     return (
  20.             <ScrollView showsVerticalScrollIndicator={false} >
  21.                 {this.itr()}
  22.         </ScrollView>
  23.     );
  24.   }
  25.   itr(){
  26.           let a=[]
  27.           for(let i=0;i<2;i++){
  28.                   a.push(<Pic key={i} name={data[i].name} text={data[i].text}/>)
  29.           }
  30.           return a
  31.   }
  32. }

  33. AppRegistry.registerComponent('myreact', () => myreact);
复制代码

我先在外部定义了一个json变量,来模拟用数据库传进来的json数据。然后把变量写进组件里我自己命名的一个变量里,为了省事我把内容就改成了2条,放图片文件的目录为了美观我给放在了image文件夹里了。然后打开我们写组件的那个test.js文件,修改为以下代码:
  1. import React, { Component } from 'react';
  2. import {
  3.   AppRegistry,
  4.   StyleSheet,
  5.   Text,
  6.   View,
  7.   Image
  8. } from 'react-native';
  9. export default class Pic extends React.Component{
  10.   static defaultProps = {
  11.     text: '我是默认值'
  12.     }
  13.   render(){
  14.     return(
  15.       <View style={styles.container}>
  16.           <Image style={styles.img} source={this.props.name}/>
  17.           <Text style={{fontSize:25}}>{this.props.text}</Text>
  18.       </View>
  19.     )
  20. }
  21. }

  22. const styles = StyleSheet.create({
  23.   container: {
  24.     flex: 1,
  25.     backgroundColor: '#F5FCFF',
  26.     justifyContent:'center',
  27.     flexWrap: 'wrap',
  28.     alignItems:'center'
  29.   },
  30.   img:{
  31.           borderRadius: 20,
  32.           borderColor: 'red',
  33.           borderWidth: 2,
  34.     width:200,
  35.     height:200
  36.   }
  37. });
复制代码

就是直接把我之前命名的变量前面加上个this.props就行了,然后外面加个大括号,这个传什么变量类型都可以非常方便。我在类里建了个静态变量defaultProps设置了这个后,如果你没有传进值来就可以直接调用这个默认的属性,如果传过来值这个就会被覆盖。来张图:
sdfdds.png

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 17:41

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表