react-native布局、组件、热更新和常见错误讲解.doc

更多组件：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