专注前端技术，包括Web端、移动端、小程序、APP

RN并没有form表单，所以想要获取输入的内容，我们必须采取其他方式。rn提供了以下几个方法可以获取输入的值：onChangeText 当文本框内容变化时调用此函数。改变后的文字内容会作为参数传递。onChange 当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }。我们可以利用onChageText来获取到内容。首先我们定义state值，用于暂存用户输入的内容。export default class L

在很多教程中，使用createbottomtabnavigator都是用的icon，需要各种引入组件，甚至还要修改配置文件。我觉得太麻烦了，就想不能使用自定义png图片吗？研究了一番之后，终于解决了这个问题，自己引入png图片作为TabBar的图标。因为此教程是根据前面几篇一同写的，所用知识点能够相互融合，所以这里的TabBar必须要用与前面几篇文章相同的技术原理——页面栈！第一步，安装bottom-tabs（根据你电脑系统选择命令进行安装）：npm install @react-navigation

导航栏的配置也是一项必学知识点。修改导航栏标题、背景色、样式、新增元素等。一、设置标题首先，导航栏的标题可通过options属性来设置。function StackScreen() { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'My home' }} /&

接着前两篇文章，我们继续往下学习。页面之间传递参数无论是在App中还是网站、小程序中都是非常重要的。然而各种技术的传参方式也稍有不同。那么RN中的页面传参都有哪几种方式呢？一、是在App.js中，将页面写入页面栈时传的初始参数。 <Stack.Screen name="首页" component={HomeScreen} initialParams={{cscs:'123'}} />initialParams={{cscs:‘123’}}就是首页页面初始化时的参数。你可以在HomeS

接着昨天的 React Native导航栏系列（一），今天继续了解RN中导航的知识。在应用中，最需要的就是页面之间跳转，返回页面，跳转到指定页面等等一系列页面导航问题。首先，你的应用里所有页面都需要写在页面栈的容器中。 <NavigationContainer> <Stack.Navigator> <Stack.Screen name="首页" component={HomeScreen}/> &lt

对于RN新手来说，这里面的很多知识点可能会让你觉得很绕。就导航栏来说，就会让你觉得有点不适应，因为创建了一个新项目之后，导航栏的一些组件并不包括在创建好的项目中，只能在后面再进行安装。接下来，我会出RN导航栏的文章一二三。此导航栏适用于安卓、苹果。第一步，安装相应的组件：在React Native项目中安装所需的软件包（根据自己的系统进行选择命令）：npm install @react-navigation/nativeyarn add @react-navigation/native接着还

ES6：import React, { Component } from 'react';import {ScrollView,Text, View,StyleSheet,ToastAndroid, Button,Image,Dimensions, TouchableOpacity, Platform} from 'react-native';const Dim = Dimensions.get('window')const {width} = Dimexport default ..

方法很简单，只需要定义好图片数组，接着进行循环即可。constructor(props) { super(props); this.state = { scrollImage:[ { img:require('../../images/OHR.jpg') }, { img:require('../../images/th.jpg')

查看console.log的方式最基本的有两种：第一种方式：如果你的开发环境是Windows，那么就在启动项目的时候，顺便启动日志输出：react-native log-android然后你就可以在启动黑框里查看输出的内容了。（这种不是很方便，毕竟是黑框）；如果你的开发环境是Mac，那么XCode里会有自动输出，不过同一个console会有两次输出。第二种方式：无论你是Windows环境或者Mac环境，在你的模拟器那里打开调式栏，Ctrl+M / ⌘+D我们点击Debug，Mac同理，也选择De

之前写过一篇文章：轻松实现视差功能，以小程序为例，这篇文章正是讲解的滚动视差。那么今天我在React Native上实现一下视差功能。需要用到的知识点：React Native 页面状态值 State，状态值的初始化及改变。React Native 页面滚动距离的获取。RN组件的样式动态设置。视差功能原理：视差效果就是让多层背景以不同的速度去移动。至少需要两层背景。一个是缓慢移动区，另一个是正常移动区。将背景设置为相对布局。通过给缓慢区设置top值来缓冲scroll滚动。根据滑动事

在使用RN的时候，为了更好地管理维护功能块，我们可以将特定功能进行封装，如果在多个页面都有使用该功能，那么可以在需要使用的界面调用封装好的功能块即可。首先，你要明白，一个js文件就是一个页面或者是一个功能块。所以，在你创建了一个js文件之后，里面编写一个函数或者一个类（当然可以有多个），然后将需要首要展示的函数或者类进行导出，因为你要将你所编写的模块进行展示或者被调用，所以就需要有进行导出。例如，我现在有两个js文件，一个是App.js，一个是Home.js。在App初始化进入的时候，需要进行展示Ho

对于新上手RN的同学，可能样式的写法让你有点懵懂。不过没关系，你只要掌握了下面几种，你就会对样式的写法熟悉起来。最基本的样式写法：import React from 'react';import {View,Text,StyleSheet} from 'react-native';export default function MyScreen(){ return( <View style={style.container}> <Text&gt

做之前先看效果图：直接在你的项目目录下安装组件：npm install react-native-tab-navigator --save接着直接粘贴下面代码到你的项目中（简单粗暴）：import React,{Component} from 'react';import { StyleSheet, Image,} from 'react-native';import HomeScreen from './pages/HomePage';import TreasureChest