react native是什么框架?


本文摘自PHP中文网,作者青灯夜游,侵删。

React Native是一个开源的跨平台移动应用开发框架,支持iOS和安卓两大平台;它使用Javascript语言,JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

相关推荐:《React视频教程》

React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。

React Native使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

import React, { Component } from 'react';

import { Text, View } from 'react-native';

 

class WhyReactNativeIsSoGreat extends Component {

  render() {

    return (

      <View>

        <Text>

          如果你喜欢在Web上使用React,那你也肯定会喜欢React Native.

        </Text>

        <Text>

          基本上就是用原生组件比如'View''Text'

          来代替web组件'div''span'

        </Text>

      </View>

    );

  }

}

上面代码就是运用react native写的一个简单组件。

React Native着力于提高多平台开发的开发效率 ―― 仅需学习一次,编写任何平台。

React Native应用是真正的移动应用

React Native产出的并不是“网页应用”, 或者说“HTML5应用”,又或者“混合应用”。 最终产品是一个真正的移动应用,从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

import React, { Component } from 'react';

import { Image, ScrollView, Text } from 'react-native';

class AwkwardScrollingImageWithText extends Component {

  render() {

    return (

      <ScrollView>

        <Image

          source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}

          style={{width: 320, height:180}}

        />

        <Text>

          在iOS上,React Native的ScrollView组件封装的是原生的UIScrollView。

          在Android上,封装的则是原生的ScrollView。

          在iOS上,React Native的Image组件封装的是原生的UIImageView。

          在Android上,封装的则是原生的ImageView。

          React Native封装了这些基础的原生组件,使你在得到媲美原生应用性能的同时,还能受益于React优雅的架构设计。

        </Text>

      </ScrollView>

    );

  }

}

更多编程相关知识,请访问:编程入门!!

以上就是react native是什么框架?的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

React怎么实现收藏功能

React如何提高首屏加载速度

前端React是什么

React中怎么获取数据

React需要node吗

React域问题怎么解决

React设置文件路径别名的具体方法你知道么

webstorm不识别React怎么办

React状态机是什么

什么编辑器支持React

更多相关阅读请进入《React》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...