【React Native】学习记录(二)——路由搭建和常见的开发技巧

这篇具有很好参考价值的文章主要介绍了【React Native】学习记录(二)——路由搭建和常见的开发技巧。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

模拟器设置成中文

在开发过程中发现,两个模拟器都不能输入中文,所以需要配置一下。

先说一下安卓,在弹出的输入框中查看设置,设置一下对应的languages即可:
【React Native】学习记录(二)——路由搭建和常见的开发技巧,学习记录,学习,react native在苹果模拟器中,跟苹果手机一样,打开设置,然后打开通用,同样设置语言:
【React Native】学习记录(二)——路由搭建和常见的开发技巧,学习记录,学习,react native

路由搭建

我在这里走了弯路,去了另一个库…,路由文档入口在这:链接

sudo npm install @react-navigation/native
# 兼容expo
sudo npx expo install react-native-screens react-native-safe-area-context
# 路由跳转的本质是堆栈
sudo npm install @react-navigation/native-stack
# 我们项目中会使用到底部导航栏跳转
sudo npm install @react-navigation/bottom-tabs

我要做的东西如下:
【React Native】学习记录(二)——路由搭建和常见的开发技巧,学习记录,学习,react native
大概也能猜出哪些路由了,这里说一下路由中tab页面和普通页面的搭建,关于抽屉页面,后续使用了再补上:

// router/index.js
import react from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Feather } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import HabitHome from '../views/habit/home/index';
import HabitDetail from '../views/habit/detail/index';
import HabitSet from '../views/habit/set';
import DateHome from '../views/date/home/index';
import DateSet from '../views/date/set/index';


// 这里声明了底部tab页面有哪些,还配置了顶部导航栏的一些自定义按钮
const Tab = createBottomTabNavigator();

function TabStack(){
    return (
        <Tab.Navigator 
        screenOptions={{ 
          headerShown: true,
          tabBarInactiveTintColor: '#333',
          tabBarActiveTintColor: '#6528F7',
          tabBarShowLabel: true,
        }}>
            <Tab.Screen 
              name="HabitHome" 
              component={HabitHome}
              options={{
                title: '',
                tabBarLabel: '打卡',
                tabBarIcon: ({ color, size }) => (
                  <Feather name="target" color={color} size={size} />
                ),
              }} />
            <Tab.Screen 
            name="DateHome" 
            component={DateHome}
            options={{
              title: '',
              tabBarLabel: '纪念日',
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="calendar-heart" color={color} size={size} />
              ),
            }} />
        </Tab.Navigator>
    )
}

// 将底部导航栏和非底部导航栏的页面都写在这里:
const Stack = createNativeStackNavigator();

function PageStack(){
  return (
    <Stack.Navigator>
      <Stack.Screen
          name="TabStack"
          component={TabStack}
          options={{ headerShown: false }}
      />
      <Stack.Screen name="HabitDetail" component={HabitDetail} options={{ title: '习惯详情' }} />
      <Stack.Screen 
        name="HabitSet" 
        component={HabitSet}
        options={{
          title: '添加一个习惯'
        }} />
      <Stack.Screen name="DateSet" component={DateSet} options={{ title: '设置纪念日' }} />
    </Stack.Navigator>
  )
}

export default PageStack;


接下来就是在App.js中使用了:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { Provider } from 'react-redux'
import store from './store/index'
import  PageStack from './router/index'

function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <PageStack />
      </NavigationContainer>
    </Provider>
  );
}

export default App;

用的状态管理器,还是redux,像以前在普通react项目中那样使用就行(官网地址)

开发技巧

  1. ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染(还没滑动到下一屏幕,也是会被渲染出来),FlatList更适于长列表数据,且元素个数可以增删,和ScrollView不同的是,FlatList并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。综上,如果列表太长的情况下,可以优先使用FlatList
  2. View组件类似Div组件,但是没有点击事件;
  3. 所有文字必须包含在Text组件中;
  4. Button组件在两端的机器上显示的不一样,所以为了确保样式一致性,我会使用View按钮来制作按钮;
  5. 由于View上没有点击事件,所以我借助了TouchableOpacity,而安卓机上还有一个特有的组件:TouchableNativeFeedback,做了如下封装:
import { TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';

function CommonButton (props){
    const { onPress, children } = props;

    if(Platform.OS === 'android') {
        return (
            <TouchableNativeFeedback 
                background={TouchableNativeFeedback.Ripple('rgba(215, 187, 245, 0.5)', false)}
                onPress={onPress}>
                { children }
            </TouchableNativeFeedback>
        )
    }else {
        return (
            <TouchableOpacity onPress={onPress}>
                { children }
            </TouchableOpacity>
        )
    }
}

export default CommonButton;

  1. 从上面的例子可知Platform可以用来判断端的类型,如果你觉得一个文件编写两套代码麻烦,可以改成下面的方式:
- common-button.ios.js
- common-button.android.js

在引入文件的时候还是直接写:

import CommonButton from 'xxx/xxx/common-button'
  1. React Native中的flex跟平常的还是有些区别的;

  2. 由于样式的局限性,所以在项目中我想借助float来写瀑布流样式是不支持的,后来实现的方法是采用了拆分成了两列:

    【React Native】学习记录(二)——路由搭建和常见的开发技巧,学习记录,学习,react native

  3. 生成随机数有很多种npm包供使用,比如nanoid,但是它不兼容React Native,这里采用了uuid:文章来源地址https://www.toymoban.com/news/detail-617512.html

npm i uuid react-native-get-random-values
// store/modules/habit

import { createSlice } from '@reduxjs/toolkit';
import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';

const defaultList = [
    {
        id: uuidv4(10),
        name: '打卡',
        count: 0,
    },
]

// ...
  1. expo包内置了图标,文档地址:@expo/vector-icons;
  2. 路由跳转,在页面props中可以获取navigation对象:
function HabitHome(props) {
  const { navigation } = props;
  
  // ...
  
  // 新增打卡
  const goSetPage = () => {
    navigation.navigate('HabitSet')
  }
  
  // ...
}
  1. 当用户在输入某些内容,会弹出键盘,键盘有时候会挡住页面,可以借助KeyboardAvoidingView组件,本组件可以自动根据键盘的高度,调整自身的 height 或底部的 padding,以避免被遮挡;
  2. 另外键盘弹出之后,我们希望可以在点击其他地方的时候自动收回键盘,那么可以借助TouchableWithoutFeedback,最终代码如下:
function HabitSet(props) {
  // ...

  // 收起键盘
  const onPress = () => {
    Keyboard.dismiss();
  }
  
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <KeyboardAvoidingView style={styles.container} behavior={Platform.OS == "ios" ? "padding" : "height"}>
        // ...
      </KeyboardAvoidingView>
    </TouchableWithoutFeedback>
  );
}

参考

  • expo
  • react native
  • react-navigation
  • 图标
  • 配色参考
  • react-redux

到了这里,关于【React Native】学习记录(二)——路由搭建和常见的开发技巧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React Native 环境搭建

    省流:失败!!!使用简易沙盒环境搭建项目!!! 万马奔腾!!! Mac 版 根据官网步骤进行,V 0.72 注:在开始之前,我删除了电脑中已有 Homebrew ,重新安装最新版的 Homebrew。过程中使用有科学上网工具。 关于 Homebrew 的安装问题,可以参考这篇博客。 1,安装 node 下载到某

    2024年02月05日
    浏览(53)
  • React Native环境配置搭建

    React Native官网环境搭建教程写的不够详细,并且有些坑,使得搭建环境很慢,本文章就是为了解决这些问题,以新手为标准的文档。 首先看下官网的说明: 重点: 必须安装的依赖有:Node、JDK 和 Android Studio 。 安装完这三个基本就可以了,接下来就详细讲讲这三个的安装。

    2024年02月13日
    浏览(28)
  • React Native 环境搭建——IOS环境

    React Native 环境搭建,参考:加餐|集中答疑:详解iOS环境搭建-极客时间 已有npm、node、Homebrew 1、安装 Homebrew Homebrew国内如何自动安装(国内地址)(Mac Linux) - 知乎 2、安装 node、npm 3、安装 Watchman 的工具 它是由 Facebook 开发的一个工具,只要你的文件有一些变化,它就会自

    2024年02月05日
    浏览(38)
  • React Native环境配置搭建(全网最全 没有之一)

    小编在配置RN环境的时候,遇到了各种 坎儿,在发布这篇之前终于是搞好了,特此在这把详细过程记录下,以便造福各位。(一键三连点关注,关注小夏不迷路) 准备工作:必须安装的依赖有:Node、JDK 和 Android Studio。 1)node必须在14以上,可以去 node官网下载。 2)个人我推

    2024年02月02日
    浏览(48)
  • React Native环境配置搭建(看这一篇就够了!)

    搭建开发环境 · React Native 中文网 https://reactnative.cn/docs/environment-setup 开发平台选择 windows  目标平台选择 Android 准备工作:必须安装的依赖有:Node、JDK 和 Android Studio。 1、安装node  node必须在14以上,可以去 node官网下载,我这里用的是NVM。NVM教程  可以打开cmd,查看当前n

    2024年02月01日
    浏览(56)
  • React Native 开发工具配置

    VSCode 插件 Auto Close Tag Auto Rename Tag colorize ESLint GitLens Markdown All in One Prettier React Native Tools Git 可视化工具 SourceTree 帮助文档:https://blog.csdn.net/qq_44721831/article/details/128674431 真机投屏工具 scrcpy 使用 USB 连接电脑后,运行程序即可使用 帮助文档:https://github.com/Genymobile/scrcpy/wiki/

    2024年02月11日
    浏览(55)
  • react native 开发坑之-版本兼容

    在搭建react native的项目时候,build.gradle中默认 Kotlin. The binary version of its metadata is 1.6.0, expected version is 1.4.0. jetified-react-native-0.71.0-rc.0-debug/jni/arm64-v8a/libc++_shared.so   解决方法: 解决方法: 解决方法:  解决方法: 解决方法: 解决方法:   1、找到package.json文件中的react

    2024年02月11日
    浏览(39)
  • react native在windows环境搭建并使用脚手架新建工程

    截止到2024-1-11,使用的主要 软件的版本 如下: 软件实体 版本 react-native 0.73.1 react 18.2.0 react-native-cli 2.0.1 Android Studio 2022.3.1 Patch3 Android SDK Android SDK Platform 33 34 Android SDK Android SDK Tools 33 34 Android SDK Intel x86 Atom_64 System Image Android SDK Google APIs Intel x86 Atom System Image node 20.10.0 yarn 1.

    2024年02月02日
    浏览(48)
  • 手机app开发可选技术——React Native

    React Native是Facebook于2015年开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物,支持IOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉WEB前端开发的技术人员只需要很少的学习就可以进入移动

    2024年02月09日
    浏览(44)
  • React Native+小程序容器=更高的开发效率

    React Native是由Facebook开发并于2015年首次发布的一个框架,用于构建原始的移动应用程序。 它具有许多技术上的优势: 跨平台开发:使用React Native,您可以使用相同的代码库构建同时运行在iOS和Android平台上的应用程序。这种跨平台的开发方式可以大大减少开发工作量和时间成

    2024年02月08日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包