- 1、本文档共35页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
react-native布局组件热更新和常见错误
更多组件:https://react.parts/native,调用系统的,注意查看:支持IOS or 安卓
组件和相关使用
样式用这种方式定义,可以单独提出来成一个文件。
1.引入外部样式:
var Style = require(./Styles);
就可引入相对自己目录下的Styles.js,注:React Native 没有所谓的CSS。
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: #222222,
},
active: {
borderWidth: 2,
borderColor: #00ff00
}
});
使用样式:
Text style={styles.base} /
View style={styles.background} /
2.以下是组件说明:
2.AppRegistry:应用注册,用于初始化启动应用
AppRegistry.registerComponent(项目名, () =入口Class名);
例如:
AppRegistry.registerComponent(AwesomeProject, () = SampleComponent);
3.View:试图,里面可以套用子试图:
View style={styles.view }
View style={styles.subview }
你的其它组件
View
/View
布局使用的,Android 和 IOS 都支持。
4.Text:用于显示你要显示的文字:
Text style={styles.Text }你的文字/Text
你可以配合字体样式去用
5.Image:用于显示图片信息:
Image source={{uri: team.logo}} style={styles.thumbnail}/
Source: 图片源(URL)(请求网络用uri,请求本地用:(require(image! 图片)))
注意:图片只能放在:android\app\src\main\res\drawable-[尺寸],目录下,才能被找到,其它任意位置均不能使用本地图片(文件命名:全字母小写,才能使用,否则报错)。
6.ListView: 列表试图,用于渲染自定义列表:
ListView
dataSource={this.state.dataSource}
renderRow={this.renderScoreboard}
style={styles.listView} /
dataSource:数据源(JSON 格式)
renderRow:自定义渲染行(绑定一个方法,在this下返回JSX,自定义行代码)
7.Loading加载试图的做法
1.this-renderLoadingView,建立一个显示 文字 或Image。
2.在列表渲染的时候之前,做一个这个判断,让它显示。
这里说一下,请求数据,是如何工作的,这里要用到new ListView.DataSource 和fetch
3.如上图:初始化数据使用getInitialState,对dataSource初始化,
rowHasChanged: (row1, row2) = row1 !== row2,和下面这句
rowHasChanged: function(row1, row2){ row1 !== row2} 这两句是相等的,用于行是否改编
请求数据使用的是fetch ,REQUEST_URL 是URL地址,第一个then用于 调试 或 改写返回结果,第二个then用于渲染界面,第三个catch是请求出错,所执行的。
更多请求详情,可参考:/github/fetch,(文件上传 和 表单提交,添加头部 及 提交方式,可参考,最后两项)
8.TextInput: 文本输入框,用于输入文字的
TextInput placeholder=Search via name or postcode secureTextEntry={true} /
Placeholder:提示要显示的文字
secureTextEntry:是否是密码框
以下是三个触屏试图:
9.TouchableHighlight: 触屏高亮试图,体验效果更好。
TouchableHighlight underlayColor=#99d9f4
Text style={styles.buttonText}Go/Text
/TouchableHighlight
underlayColor: 高亮所显示的颜色
10.Touchab
文档评论(0)