React Native学习笔记----1

青旅半醒 2022-07-14 06:07 203阅读 0赞

React Native是一款用来开发真正原生，可渲染iOS和Android移动应用的JavaScript的框架。使用Javscript和XML进行开发，在后台通过“桥接”方式调用由Objective-C(iOS平台）或java（Android平台）开放的原生渲染接口。  
1. 模块的导入  
使用require导入了React，如果使用组件，也要逐一的进行导入

var React=require('react-native');
    var {
          Text,
          View,
          StyleSheet,
          AppRegistry,
          }=React;

2.渲染

render:function(){
        return (
          <View style={styles.container}>
              <Text style={styles.welcome}>
               Welcome to React Native!
               </Text>
         </View>
      );
    }

3.样式

var styles=StyleSheet.create({ container:{ flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'#F5FCFF', }, welcome:{ fontSize:20, textAlign:'center', margin:10, }, });

4.组件  
开发Web应用时，会使用各种HTML元素，例如div ,span,imgdeng ,但是在React Native中，不用HTML元素，使用类似的组件。  
**HTML** \\ **React Native**  
div \\ View  
img \\ Image  
p \\ Text  
ul\\ListView, child items  
（1）文本组件  
所有的文本需要用`<Text>`组件包装起来

<View>
       <Text> This is OK!</Text>
     </View>

(2) 图片组件

<Image source={
       require('image!puppies')} />

5.导入图片作为背景

<Image source={require('image!flowers')} resizeMode='cover' style={styles.backdrop}>
       //这里放置内容
    </Image>

6.从Web获取数据

fetch('http://www.somesite.com')
       .then((response)=>response.text()) .then((responseText)=>{ console.log(responseText); })

未完。

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 React学习笔记1

什么是 React ? React 是一个用于构建用户界面的 javascript 库。 react的特点： 1、`声明式设计`−React采用声明式，可以轻松描

我不是女神ヾ/ 2022年11月20日 08:10/ 0 赞/ 206 阅读

相关 React Native学习

文章目录 React Native 学习一、React Native 概述 1.1 React Native 特性

野性酷女/ 2022年10月26日 14:28/ 0 赞/ 38 阅读

相关一些React-Native学习资料

同时还有Awesome React-Native系列 [https://github.com/jondot/awesome-react-native][https_githu

╰半夏微凉°/ 2022年08月20日 08:27/ 0 赞/ 205 阅读

相关 React-Native学习指南

React-Native指南汇集了react-native[学习][Link 1]资源与各类开源app 本指南汇集React-Native各类学习资源，给大家提供便

系统管理员/ 2022年08月07日 13:58/ 0 赞/ 185 阅读

相关 React Native学习笔记----1

React Native是一款用来开发真正原生，可渲染iOS和Android移动应用的JavaScript的框架。使用Javscript和XML进行开发，在后台通过“桥接”方式

青旅半醒/ 2022年07月14日 06:07/ 0 赞/ 204 阅读

相关 react native笔记

react native笔记参考资料： [react native中文教程][react native] [https://www.jb51.net/ar

悠悠/ 2022年05月16日 10:08/ 0 赞/ 140 阅读

相关 React Native学习心得

目前通过《React Native移动开发实战-向洪治版》进行基础学习结合网址进行学习：[https://reactnative.cn/][https_react

Myth丶恋晨/ 2022年03月28日 05:41/ 0 赞/ 319 阅读

相关 React-Native学习指南

本指南汇集React-Native各类学习资源，给大家提供便利。指南正在不断的更新，大家有好的资源欢迎Pull Requests！同时还有Awesome React Nat

Bertha 。/ 2022年03月12日 05:49/ 0 赞/ 313 阅读

相关 React-Native 学习笔记（一）

> 学习RN的学习笔记，记录下来分享于大家～来源：官网 + 其他资料复制代码一、宽&高像素无关 React Native 中的尺寸都是

川长思鸟来/ 2022年01月20日 00:41/ 0 赞/ 291 阅读

相关 React学习笔记（1）

因为实习公司技术栈主要是React，我只好从Vue 转向学习React了，先深入了解和学习React吧，Vue暂时放一边了~ 简单了解下React 2013 年

柔情只为你懂/ 2021年10月24日 00:18/ 0 赞/ 430 阅读