REACT-NATIVE入门培训.pptx

环境搭建 React-Native学习之Window环境下搭建环境配置 1,/lzn-net/p/5655271.html 2,/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/ Company Logo Diagram Company Logo Android 原生开发、H5、React-Native使用利弊和场景技术分享 Add Your Title Add Your Title 纯H5 app适合小游戏、媒体、视频、营销产品、介绍等功能。 H5加载大图片的时候性能会下降，大量用户访问同一个H5应用时性能会下降，响应速度比不上原生app。 组件化开发。 react-native提供一个个封装好的组件让开发者使用，也可以相关嵌套形成新的组件。 跨平台、低成本开发、开发速度快、动态发布。 Company Logo Contents 前端：react-native Company Logo Hot Tip Company Logo StyleSheet样式表 最后一种不推荐，可维护性，可读性不高。弹性盒模型介绍，使用不同屏幕大小，设备类型，使得布局方式恰当。 给一个组件指定flex，number类型。Flex：1 表示组件可以充满父组件所有的剩余空间。 如果子组件并列多个，设置flex，按比例分配所有的剩余空间 Flexbox render() { return ( View style={{flex: 1, flexDirection: column}} NavigatorBar title={flexbox布局} onBack={()= { const {navigator}=ps; if (navigator) { navigator.pop(); } }}/ View style={{flex: 1, backgroundColor: yellow, margin: 10}}/View View style={{flex: 2, backgroundColor: blue, margin: 10}}/View View style={{flex: 3, backgroundColor: red, margin: 10}}/View /View ); } 配色方案修改： Company Logo 常用组件介绍 View style={{flex: 5}} ListView dataSource={this.state.dataSource} renderRow={(rowData) = this.renderRow(rowData)} / /View renderRow(rowData) { return ( View style={styles.row} View style={styles.head} Text style={styles.label}{rowData.inputtext}/Text /View View style={styles.flex} TextInput style={styles.input} value={} onChangeText={(name