[React-Native]初识代码结构

简介: 一、了解index.ios.jsReact-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发,开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。

一、了解index.ios.js

React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发,开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。目前天猫也在这块开始试水,一些其他大厂都在尝试Reac Native开发。
分析命令创建的HelloWorld的index.ios.js代码:
1.第一句:var React = require(‘react-native’);有Node.js开发经验的同学都清楚,require可以引入其他模块。如果没有node.js开发经验的同学,可以脑补下java的import和c++的#include或者C#的using
2.第二句:批量定义组件

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

其实,这只是一个语法糖而已,比如AppRegistry我们可以这样定义:var AppRegistry = React.AppRegistry;

3.构建Heollo World入口类。React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实这是JSX的模板语法,可以提前学习下。

4.相对于web开发,我们需要提供视图的样式,那么StyleSheet.create就是干这件事的,只是用JS的自面量表达了css样式。
5.如何引入css样式?其实在render方法返回的视图模板里已经体现出来了,即style={styles.container}.其中style是视图的一个属性,styles是我们定义的样式表,container是样式表中的一个样式。
6.注册应用入口,这个一定不能少,否则模拟器会提示报错:

二、需要掌握的其他技术

对于React-Native开发,仅仅有基础前端开发的知识是不够的,你还需要了解和掌握的有:

  • Node.js基础
  • JSX语法基础
  • Flexbox布局

三、目前需要关注的文件

1.在xcode项目代码中AppDelegate.m会标识入口文件,例如:
jsCodeLocation = [NSURL URLWithString:@”http://localhost:8081/index.ios.bundle“];
如果是网上下载别人的源码,注意此处的ip和端口是否有被修改。
2.闪屏界面在哪修改?在xcode项目中找到LaunchScreen.xib文件,点击,你会看到界面,这个就是启动界面,你手动添加组件或者修改文本即可,最好了解下xcode的使用。
3.文本编辑器打开index.ios.js文件,是js代码的入口文件,所有的代码编写从这开始,可以定义自己的模块和引入第三方模块。
这里写图片描述

四、修改文件index.ios.js

添加图片和修改样式。
(1)添加Image组件,将代码修改如下:

var {
    StyleSheet,
    Text,
    View,
    Image,
} = React;

(2)将render返回中的模版增加Image组件试图,具体如下:

render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                React-Native入门学习
            </Text>
            <Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>
            </Image>
        </View>
    );
}

其中,Image标签的source的第一个大括号是模板,第二个大括号是js对象,js对象里面有个key是uri,表示图片的地址。
(3)修改图片试图样式,删除多余的样式,增加pic样式

const style = StyleSheet.create({
  container:{
    flex:1,
    alignItems:'center',
  },
  welcome:{
    fontSize:20,
    textAlign:'center',
    margin:10,
    color:'red',
  },
  pic:{
    width:193,
    height:100,
  }
})

(4)运行cmd+R
这里写图片描述

五、代码

import React, { Component } from 'react';
import {AppRegistry, View, Image, StyleSheet, Text} from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };

  return (
      <View style={style.container}>
        <Text style={style.welcome}>
          React-Native入门学习
        </Text>
       <Image source={pic} style={{width: 193, height: 110}}/>
      </View>
    );
  }
}

const style = StyleSheet.create({
  container:{
    flex:1,
    alignItems:'center',
  },
  welcome:{
    fontSize:20,
    textAlign:'center',
    margin:10,
    color:'red',
  },
  pic:{
    width:193,
    height:100,
  }
})

AppRegistry.registerComponent('HelloWorld', () => Bananas);
相关文章
|
5月前
|
监控 前端开发 API
React代码在电脑监控软件开发中的应用
这篇文章除了介绍React在电脑监控软件开发中的应用,还展示了如何通过组件化构建监控界面,如`MonitorDashboard`、`StatusWidget`和`ActivityLog`组件。文章强调了React的生命周期方法和Hooks在实时数据获取和显示中的作用,如`SystemStatus`组件的`useEffect`钩子。此外,还讲解了如何监听和记录用户行为的`UserActivity`组件,以及利用axios自动提交监控数据的`DataSubmitter`组件。React的这些特性使得开发高效、响应式的监控软件变得更加便捷。
92 8
|
6月前
|
前端开发 JavaScript API
React API 和代码重用的演变!
React API 和代码重用的演变!
|
5月前
|
存储 前端开发 数据库
|
2月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
39 2
|
5月前
|
前端开发
|
3月前
|
开发者 搜索推荐 Java
超越传统:JSF自定义标签库如何成为现代Web开发的个性化引擎
【8月更文挑战第31天】JavaServer Faces(JSF)框架支持通过自定义标签库扩展其内置组件,以满足特定业务需求。这涉及创建`.taglib`文件定义标签库及组件,并实现对应的Java类与渲染器。本文介绍如何构建和应用JSF自定义标签库,包括定义标签库、实现标签类与渲染器逻辑,以及在JSF页面中使用这些自定义标签,从而提升代码复用性和可维护性,助力开发更复杂且个性化的Web应用。
69 0
|
3月前
|
前端开发 测试技术 UED
React性能优化的神奇之处:如何用懒加载与代码分割让你的项目一鸣惊人?
【8月更文挑战第31天】在现代Web开发中,性能优化至关重要。本文探讨了React中的懒加载与代码分割技术,通过示例展示了如何在实际项目中应用这些技术。懒加载能够延迟加载组件,提高页面加载速度;代码分割则将应用程序代码分割成多个块,按需加载。两者结合使用,可以显著提升用户体验。遵循合理使用懒加载、编写测试及关注性能等最佳实践,能够更高效地进行性能优化,提升应用程序的整体表现。随着React生态的发展,懒加载与代码分割技术将在未来Web开发中发挥更大作用。
45 0
|
3月前
|
前端开发 UED 开发者
React.lazy()与Suspense:实现按需加载的动态组件——深入理解代码分割、提升首屏速度和优化用户体验的关键技术
【8月更文挑战第31天】在现代Web应用中,性能优化至关重要,特别是减少首屏加载时间和提升用户交互体验。React.lazy()和Suspense组件提供了一种优雅的解决方案,允许按需加载组件,仅在需要渲染时加载相应代码块,从而加快页面展示速度。Suspense组件在组件加载期间显示备选内容,确保了平滑的加载过渡。
127 0
|
3月前
|
XML 前端开发 JavaScript
【React新手必看】JSX,让你的代码舞动起来!
【8月更文挑战第24天】JSX(JavaScript XML)是React开发的核心,作为一种JavaScript语法扩展,它支持在代码中使用类似HTML的标签。JSX并非模板语言,在编译过程中转换为纯JavaScript,使React能高效更新DOM并渲染页面。其优势在于直观性、简洁性和灵活性:简化复杂用户界面构建、减少代码量,并支持HTML标签、React组件及JavaScript变量的表达式插入。基本用法涉及定义组件UI,如创建包含标题和段落的简单组件。
77 0
|
4月前
|
前端开发
React官网 - 井字棋 - 游戏改进参考答案(含汉化和完整范例代码)
React官网 - 井字棋 - 游戏改进参考答案(含汉化和完整范例代码)
44 1