基本组件的使用介绍

  • View:
  • Text:
  • TextInput:
  • Image:
  • Button:
  • ActivityIndicator:
  • ScrollView:这是一个列表滚动的组件
  • ListView:也是一个列表滚动的组件,但是,这个组件已经过时了,官方推荐使用 FlatList 来代替它

index.js

// 从 Reactnative 的包中,导入 AppRegistry 组件,它的作用,就是注册项目首页的
import { AppRegistry } from 'react-native'; import App from './App'; // 导入自己的组件页面
import MyHomePage from './MyHomePage.js' // 当使用 AppRegistry 注册项目的时候,方法中的第一个参数,不要改,否则项目就废了
// 第二个参数,表示要把哪个页面注册为项目的首页
AppRegistry.registerComponent('rn_douban', () => App);

MyHomePage.js

// 在 RN 中只能使用 .js 作为 组件的后缀名,不能使用 .jsx
import React, { Component } from 'react' // View 组件负责布局,就好比 网页中的 div 元素
import { View, Text } from 'react-native' export default class MyHomePage extends Component {
// constructor 一般也推荐都写出来
constructor(props) {
super(props)
this.state = {}
} // 必须有 render 函数
render() {
// 1, 在 RN 中,不能使用 网页中的 所有标签,像 div , p , img不能用
// 2. 如果想要实现布局, RN 提供了 View 的组件,来实现布局;RN 提供了一系列基础的组件,来方便程序员的开发,如果想要使用这些组件,只需 按需 把 组件 从 'react-native' 中导入即可
return <View>
{/* 在 RN 中,所有的文本,必须使用 RN 提供的 Text 组件进行包裹;否则会报错 */}
<Text>123456~~~~~</Text>
</View>
}
}

app.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
// 导入 React 基础包,这个包,作用是创建 组件
import React, { Component } from 'react'; // 从 react-native 中导入系统开发需要的包
import {
Platform, // 用来提供平台检测功能的
StyleSheet, // 样式相关的组件,专门用来创建样式的
Text, // 文本节点,所有文本必须放到这个里面
View, // 用来布局的,相当于 div
TextInput, // 文本框组件
Image, // 图片组件
Button, // 按钮组件
ActivityIndicator, // 加载中的 loading 效果小圆圈
ScrollView, // 滚动组件(默认,如果一个RN的页面非常长,超出了屏幕高度,这时候,不会像网页中那样自动提供滚动条,如果需要让页面实现滚动的话,需要使用 ScrollView 把页面包裹起来)
} from 'react-native'; const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
}); // 这是 TS(TypeScript) 的语法
export default class App extends Component {
render() {
return (
<View style={styles.container}>
{/* 如果使用 animating 隐藏 loading效果,只是让他不可见了,但是区域还在 */}
<ScrollView style={{width: '100%'}}>
<ActivityIndicator color="red" size="large" animating={true}></ActivityIndicator>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
<TextInput style={styles.inputStyle} defaultValue="哈哈,今天总有人在后面说话" secureTextEntry={true}></TextInput> {/* 引入本地的图片资源 */}
<Image source={require('./images/1.jpg')}></Image>
<Image source={require('./images/1.jpg')}></Image>
<Image source={require('./images/1.jpg')}></Image>
<Image source={require('./images/1.jpg')}></Image> {/* 引入网络中的图片资源,除了要指定 一个 uri 资源路径之外,还需要 为这张网络图片,指定宽和高,否则显示不出来; */}
<Image source={{ uri: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=358796479,4085336161&fm=200&gp=0.jpg' }} style={{ width: 200, height: 160 }}></Image> {/* 在 Button 按钮中, title 属性 和 onPress 属性是必须的 */}
{/* onPress 表示点击按钮,要触发的操作 */}
<Button title="这是一个按钮" onPress={() => { console.warn('123') }}></Button> </ScrollView>
</View>
);
}
} // 使用 StyleSheet.create 创建样式表对象,可以为 create 传递 一个配置对象,这个对象,就是要创建的样式
const styles = StyleSheet.create({
container: {
flex: 1,
// 在RN中,主轴默认是纵向的
justifyContent: 'flex-start', // 一些 文本类型的 样式值,需要使用 引号包裹起来
alignItems: 'flex-start',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20, // 长度单位的 px 值可以省略,因为 RN 默认就是以 px 作为单位的
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
inputStyle: {
width: '100%'
}
}); // 总结:如果要定义一个基本的 RN 页面:需要的步骤:
// 1. 导入 react 包,来创建组件
// 2. 导入 react-native 包,来提供基础的开发组件
// 3. 从 react-naitve 中,可以导入 StyleSheet 的组件,用它 的 create 方法,可以创建样式对象
// 4. 使用 react 基础的语法,创建出来的组件,就是一个 合法的 RN 组件页面;如果想要在页面中,放置一些合法的 页面元素,只能使用 RN 库提供的 固有组件;不能使用 网页中的 任何 元素;

react-native简单使用的更多相关文章

  1. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  2. React Native之Fetch简单封装、获取网络状态

    1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...

  3. React Native超简单完整示例-tabs、页面导航、热更新、用户行为分析

    初学React Native,如果没有人指引,会发现好多东西无从下手,但当有人指引后,会发现其实很简单.这也是本人写这篇博客的主要原因,希望能帮到初学者. 本文不会介绍如何搭建开发环境,如果你还没有搭 ...

  4. React Native环境配置和简单使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  5. React Native ——实现一个简单的抓取github上的项目数据列表

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...

  6. React Native ——入门环境搭配以及简单实例

    一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent. ...

  7. react native 导航器 Navigator 简单的例子

    最近学习react native 是在为全栈工程师而努力,看网上把react native说的各种好,忍不住学习了一把.总体感觉还可以,特别是可以开发android和ios这点非常厉害,刚开始入门需要 ...

  8. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  9. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  10. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

随机推荐

  1. 修改centos7容器的时间和宿主机时间一致

    一.问题 centos7系统容器时间与宿主机系统时间不一致,就进去查看一番,发现时区和宿主机上的时间不一致,下面就来解决一下 二.现象 1.查看centos宿主机的时间 输入如下命令查看 # date ...

  2. python 解压、复制、删除 文件

    一.python3解压文件 1.python 解压文件代码示例 如下代码主要实现zip.rar.tar.tar.gz四种格式的压缩文件的解压 def unzip_file(src_file, dst_ ...

  3. 工作五年的.neter的一些经历感想和对未来的一些疑惑

    本次疫情在家办公快一个月了,节省了上下班的时间,外出活动时间,感觉有好多时间可以利用.人一闲下来就容易想事情,很多事情想不通心里堵的厉害,做事都提不起兴趣.至于想些什么呢,我给大家摆一下. 我的经历 ...

  4. .Net core webapi使用httpClient发送异步请求遇到TaskCanceledException: A task was canceled

    前言:本人最近较多使用.net core的项目,最近在使用httpClient发送请求的时候,遇到服务器处理时间较长时,就老是会报异常:TaskCanceledException: A task wa ...

  5. C# 四则运算及省市选择及日月选择

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. 深入理解 Android 中的各种 Context

    前言 网上关于 Context 的文章也已经有不少了,比如值得参考的有: Android Context完全解析,你所不知道的Context的各种细节 Android Context 到底是什么? 但 ...

  7. 安装Matlab R2017a 出现 “弹出DVD1 并插入DVD2” 解决办法超简单

    打开此电脑 找到驱动器虚拟镜像 右击选择弹出 点击另一个文件装载 点击确定即可

  8. U盘装系统/win to go制作笔记

    //添加图片太麻烦了吧,我扔相册里了,需要自取吧. //U盘装系统 环境:win10戴尔灵越台式机 硬件:16G U盘,Windows电脑 软件:老毛桃启动装机工具,win10镜像1803版本 进入网 ...

  9. cmake 指定编译特定可执行文件

    最近进行编译项目,但是项目中有很多可执行文件:每次编译起来比较费时,下面一组代码可以指定特定的编译目标进行编译,而不用编译所有目标: #!/bin/bash # 通过传递第一个参数,表示要编译的目标: ...

  10. MySQL日志文件和InnoDB引擎文件简介

    MySQL和InnoDB的关系不在这里介绍了.但是大家都知道其中相关的文件很多,类型很多.看文件名就有点分布清楚了.所以在这里简单介绍下他们的文件. 我们直接看文件列表以及在后面直接加注释.做笔记. ...