react native 学习笔记 2016_1223 (环境,箭头函数,state设置,图片使用等)

简介: npm install –save react-native@0.33 指定rn版本号进行安装;其中 –save可以保存相关信息到package.json中,后面@指定版本号。

npm install –save react-native@0.33

指定rn版本号进行安装;其中 –save可以保存相关信息到package.json中,后面@指定版本号。

在引入图片时遇到问题,实际是自己用法错误导致的。

原则上来说rn对图片资源的处理是跨平台的,而且采用按需加载的方式。从实现上说,该方案是比较优雅的。

我们只需要将资源文件放到自己希望的目录下,然后通过如下的方式来使用:

另:rn的使用过程中遇到一些坑,有可能跟缓存和路径之类的有关。react native init 可以创建新的工程再运行。

箭头函数:( xxx)=>{ do sth with xxx}

xxx是参数,后面的是返回值。这里是一个比较简便的写法,es6的语法糖。

“`
import React, { Component } from ‘react’;
import { AppRegistry, Text, TextInput, View } from ‘react-native’;

class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ”};
}

render() {
return (

目录
相关文章
|
4月前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
|
前端开发 API UED
React 懒加载图片 Lazy Image
懒加载是一种优化技术,通过延迟加载不在视口内的图片,减少初始页面加载时间,提升用户体验。本文从基础概念入手,逐步探讨 React 中实现图片懒加载的常见问题、易错点及解决方案,并通过代码案例详细解释。
609 3
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
233 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
277 9
|
11月前
|
前端开发 开发者
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?
210 57
|
前端开发 UED 索引
React 图片灯箱组件 Image Lightbox
图片灯箱组件是一种常见的Web交互模式,用户点击缩略图后弹出全屏窗口展示大图,并提供导航功能。本文介绍了基于React框架的图片灯箱组件开发,涵盖初始化状态管理、图片加载与预加载、键盘和鼠标事件处理等常见问题及解决方案。通过`useState`和`useEffect`钩子管理状态,使用懒加载和预加载优化性能,确保流畅的用户体验。代码案例展示了组件的基本功能实现,包括打开/关闭灯箱、切换图片及键盘操作。
478 80
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
230 0
|
11月前
|
编解码 前端开发 开发者
React 图片组件样式自定义:常见问题与解决方案
在 React 开发中,图片组件的样式自定义常因细节问题导致布局错乱、性能损耗或交互异常。本文系统梳理常见问题及解决方案,涵盖基础样式应用、响应式设计、加载状态与性能优化等,结合代码案例帮助开发者高效实现图片组件的样式控制。重点解决图片尺寸不匹配、边框阴影不一致、移动端显示模糊、加载失败处理及懒加载等问题,并总结易错点和最佳实践,助力开发者提升开发效率和用户体验。
376 22
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
480 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
258 1