RN 简介

最新推荐文章于 2024-08-06 16:45:24 发布

221900315-刘鹏程

最新推荐文章于 2024-08-06 16:45:24 发布

阅读量3.2k

点赞数 1

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/qq_46070577/article/details/125433921

版权

文章目录

一、RN简介

(1).简介

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

(2). 产生背景

React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。

(3). 发展历程、

React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。
Facebook已经在多项产品中使用了React Native，并且将持续地投入建设React Native。

二、RN基础知识

(1). 生命周期

React Native组件的生命周期和react组件的生命周期一致。

(2). 常用组件
- View: 创建UI时最基础的组件，View是一个支持Flexbox布局、样式、触摸响应、和一些无障碍功能的容器。View在设计上可以嵌套使用。
- Text：用于显示文本的React组件，也支持嵌套、样式以及触摸处理。
- Image：用于显示多种不同类型图片的React组件，包括、react组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册等）。
- ImageBackground：可以设置背景图片，使用方法与Image一致。
- TextInput：允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。
- TouchableOpacity：本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。
- ScrollView：一个封装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。一般来说我们会给ScrollView设置flex:1以使其自动填充父容器的空余空间，但前提条件时所有的父容器本身也设置了flex或者指定了高度，否则会导致无法正常滚动。
(3). 代码范例

export default class Sample extends Component {
  render() {
    return (
      // JSX
      <View style={styles.container}>
        <Text style={styles.title}>
          Welcome to React Native!
        </Text>
        <View />
        <Text>测试</Text>
      </View>
    );
  }
}