Mariya James

Mariya James

1664356130

Flutter vs. React Native For Mobile App Development: Which is the Best

The mobile app development industry has been growing exponentially recently, with new technologies and frameworks appearing every year to help developers create better mobile apps faster and more efficiently. While the traditional choice among developers continues to be Java, newer options like Flutter and React Native have become viable alternatives that are gaining popularity across the globe. 

But how do these two stacks up against each other in terms of performance, user experience, and overall cost? And which one should you choose for your business? Now, look at both of them to learn more about their similarities and differences.

About Flutter

React Native VS Flutter for a mobile app development – which one will help your business scale up in a better way? Flutter can be seen as Google's answer to React Native. The framework was developed by engineers at Google and aimed to offer an experience similar to React Native. The main difference between the two is that while React Native uses JavaScript, Flutter uses Dart programming language.


Pros of using Flutter

React Native VS Flutter: Flutter was developed by Google, and React Facebook was developed Native; which one should you choose? Flutter has a lot of advantages over React Native, including being more mature and having better documentation. Flutter also has better performance and UI components than React Native because it doesn't require JavaScript.
 

Cons of using Flutter

- Unlike React Native, Flutter does not support hot reloading. This means that if you change your code and want it to be reflected in your running application, you need to rebuild and restart your app. This can lead to longer development times. 

- Flutter has a smaller community of developers than React Native does.

About React Native

React Native was launched in 2015 and has already become one of the most popular frameworks for mobile app development. Thanks to its cross-platform abilities, React Native can be used to develop iOS, Android, and Windows apps with a single codebase.

Pros of using React Native

React Native for iOS lets you create a single app that can work on Android and iOS without sacrificing native functionality. You don't have to maintain separate code bases for each platform, which can be challenging with Flutter. React Native also has an easy learning curve because its syntax is similar to JavaScript and easy to use with the React.js library. You can also hire React Native developers from the best react native development company.

Cons of using React Native
 

1. The learning curve for React Native is much steeper than its counterparts in Flutter and Xamarin. 

2. If you're looking to make a complicated app, there are more limitations with React Native than with Flutter or Xamarin. 

3. Less JavaScript libraries are available for React Native than other programming languages like Swift or Java. 

4. You'll have more difficulty finding qualified job applicants because fewer people know how to work with React Native.
 

Difference Between Flutter and React Native
 

React Native and Flutter are great mobile app development tools that can help you create a new app from scratch. There are, however, some key differences between these two frameworks that you should know about before deciding which one to use for your project. Let's take a look at their similarities first. 
 

React Native and Flutter compile to native machine code, which means they're fast and responsive like a native app.

Conclusion

React Native and Flutter are good choices for mobile app development services. Whether you use React Native or Flutter, they will be cost-effective and have a good result. So when choosing between React Native VS Flutter, it's best to consider your business needs and preferences.
 

Read the complete blog here:

#mobileappdevelopers  #hiremobileappdevelopers  #mobileappdevelopmentcompany  #mobileappdevelopmentcompanies #reactnativeappdevelopmentcompany  #hirereactnativedevelopers  #reactnative  #reactnativedevelopment 

Flutter vs. React Native For Mobile App Development: Which is the Best
John David

John David

1664264055

NativeBase: Mobile-first, Accessible Components for React Native & Web

NativeBase is a mobile-first, accessible component library for building a consistent design system across android, iOS & web.

1. Introduction?

NativeBase is a mobile-first, component library for React & React Native. Version 3.0 ships with complete ARIA integration, support for utility props and nearly 40 components that are consistent across Android, iOS and Web. Fast-track your dev process with NativeBase 3.0.

2. Motivation

Building with React Native from scratch is a tedious process with multiple steps such as adding styling, interactions, state management, responsiveness, accessibility, etc. We wanted to build and ship accessible, high-quality apps quickly. 
 

Our inspirations include Material UI, Chakra UI, Ant Design, Braid Design System, Bootstrap, TailwindCSS & Flutter.

3. Features

Out of the Box Accessibility

Integrated with React ARIA and React Native ARIA, which provides React hooks. This enables you to build accessible design systems in no time.

Out of the box accessibility

Supporting Utility Props

Powered by Styled System so you can rapidly build custom UI components with constraint-based utility style props.

Rich Component Library

NativeBase offers around 40 components so you can build seamlessly. It includes button, checkbox, flex, stack and more.

Highly Themeable

Themeability is one of the core elements of NativeBase. You can customise your app theme and component styles to your heart's content.

Nativebase Logo

Available for Both Mobile and Web

NativeBase 3.0 is powered by React Native Web so you can build consistent UIs across Web, Android and iOS.

Responsiveness Made Easy

Instead of manually adding responsiveness, NativeBase 3.0 allows you to provide object and array values to add responsive styles.

Now with Dark Mode

Building apps with a dark mode setting just got a whole lot easier. NativeBase is now optimised for light and dark modes.

4. Dependencies

React Native, Expo

5. Installation

NativeBase is supported in Expo or React Native CLI initiated apps. Web support is made possible by react-native-web.

Refer the guides to setup NativeBase in your React app.

6. Components

NativeBase 3.0 is a rich component library with nearly 40 components.

7. Examples

Check out the Todo-List example

8. KitchenSink App

Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons, etc.

Kitchensink App gif Kitchensink App QR code

9. Tech Stack

JavaScript, React Native, Styled System

10. Compatible Versions

NativeBaseReact Native
v0.1.1v0.22 to v0.23
v0.2.0 to v0.3.1v0.24 to v0.25
v0.4.6 to v0.4.9v0.26.0 - v0.27.1
v0.5.0 to v0.5.15v0.26.0 - v0.37.0
v0.5.16 to v0.5.20v0.38.0 - v0.39.0
v2.0.0-alpha1 to v2.1.3v0.38.0 to v0.43.0
v2.1.4 to v2.1.5v0.44.0 to v0.45.0
v2.2.0v0.44.0 to v0.45.0
v2.2.1v0.46.0 and above
v2.3.0 to 2.6.1v0.46.0 and above (does not support React 16.0.0-alpha.13)
v2.7.0v0.56.0 and above
v3.0.0-next.36 to v3.0.0-next-41v0.63.0 and above
v3.0.0 to latestv0.63.0 and above

Download Details: 
Author: GeekyAnts
Source Code: https://github.com/GeekyAnts/NativeBase 
License: MIT
#reactnative #nativebase 

NativeBase: Mobile-first, Accessible Components for React Native & Web
Toby Rogers

Toby Rogers

1664003097

Form Validation in React Native with Formik and Yup

In this tutorial, you'll learn how to implement form validation in react native with Formik and Yup. Here I have shown you how to create validation schema in Yup and how to validate a password for a strong password and match it with confirm password field. Also how to validate fixed digits number input in a field.

► Timestamps
0:00 Introduction
2:31 Creating the Form UI
4:35 Implement Form Validation with Formik & Yup

#reactnative #formik #yup

Form Validation in React Native with Formik and Yup
Joshua Yates

Joshua Yates

1663058698

How to Build Food Delivery App with React Native

In this tutorial, you'll learn how to build food delivery App with React Native

  1. Food Delivery App (Part 1) - React Native UI | Drawer Animation | Bottom Tabs Animation
  2. Food Delivery App (Part 2) - React Native UI | Text/Form Input
  3. Food Delivery App (Part 3) - React Native UI | Swipeable List | Maps | Direction

Food Delivery App (Part 1) - React Native UI | Drawer Animation | Bottom Tabs Animation

In this episode, we are going to build a pretty cool food delivery app based on the UI design that we have just bought recently.

Food Delivery App (Part 2) - React Native UI | Text/Form Input

In this episode, we are going to build a pretty cool food delivery app based on the UI design that we have just bought recently.

Food Delivery App (Part 3) - React Native UI | Swipeable List | Maps | Direction

In this episode, for the 3rd and final - Food Delivery App, we are going to build 8 different screens which includes food detail, checkout, cards, maps and etc.

#reactnative 

How to Build Food Delivery App with React Native

Building a Food Delivery App in React Native

In this React Native projects tutorial, we’ll take a look at how to create a food delivery app in React Native. 

Build a Food Delivery App in React Native ( Part 1 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 2 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 3 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 4 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 5 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 6 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 7 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 8 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 9 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 10 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 11 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 12 ) | React Native Projects

Build a Food Delivery App in React Native ( Part 13 ) | React Native Projects

#reactnative #react

Building a Food Delivery App in React Native

Send SMS Text Messages for Expo React Native Apps

Today I’m going to show you how to send sms text messages from Expo react native iOS and Android apps using the expo-sms package. I will also show you how to check the availability of sms and add attachments to your messages.

If you are interested in my code from this expo-sms tutorial today, you can find it on GitHub: https://github.com/chelseafarley/expo-sms-example  

Subscribe: https://www.youtube.com/c/MissCoding/featured 

#reactnative  

Send SMS Text Messages for Expo React Native Apps

Local Authentication | React Native Expo Local Authentication

React Native Expo Local Authentication | Face ID | Touch ID | Passcode 

Hey friends! I'm Beto and in this video I show you how to integrate Local Authentication using Expo Go
 

⌚️  Timestamps ⌚️
0:00 Introduction
1:20 Creating Project
1:54 Installing Dependencies
3:08 Creating Auth Screen 
6:02 Creating Payment Screen 
9:02 Adding Functionality
15:51 Updating InfoPlist File

Subscribe : https://www.youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/featured 

#reactnative 

Local Authentication | React Native Expo Local Authentication

7 Best React Native Radio Button Libraries in 2022

What is Radio button ?

A radio button is one type of selection indicator in a list of options. If an option is selected, the circle is filled. If the option is not selected, the circle is empty. When one circle is selected, the others are deselected, so that only one option may be selected at any time.

It allow the user to select one option from a set. You should use radio buttons for optional sets that are mutually exclusive if you think that the user needs to see all available options side-by-side. If it's not necessary to show all options side-by-side, use a spinner instead.

In the article below, we'll learn 7 Best React Native Radio Button Libraries in 2022

  1. radio-buttons-react-native

Animated radio buttons component for react native

4 types animation when click on any items of radio button

DEMO

View Github

2.   React Native Radio Buttons Group

Simple, best and easy to use radio buttons for react native apps.

DEMO

DEMO

View Github

3.   React Native Flexi Radio Button

Simple and flexible Radio button for React Native App

DEMO

basic_example_iosbasic_example_android

View Github

4.   react-native-simple-radio-button

simple and useful radio button component for React Native

Demo

Demo

View Github

5.   React-Native Radio Button

Just a simple radio button for React-Native.

View Github

6.   React Native SelectMultiple Button

This library is a button (or a grouped buttons) supporting multiple or radio selection by building with React Native. https://github.com/danceyoung/selectmultiplebuttons for Swift.

You can specify any Layout and Style for container view,button view and text through View Style Props, Layout Props and Text Style Props supporting by React Native

Example running in iOS and Android(captured by GIPHY CAPTURE)

captured by GIPHY CAPTURE

Note:Runing a Android Virtual Device is TMDing too large memory eated.

View Github

7.    react-native-custom-radio-group

A react native radio group component with custom radio button. The component enables single select radio button behaviour with default select option and customization of the button styles.

Example:
Example uses default styles by RadioGroup

Demo gif

View Github

Here are all 7 best React Native radio button libraries of 2022 in my opinion. If you find it interesting, please like and share to support <3

#react #reactnative #mobileapp

7 Best React Native Radio Button Libraries in 2022
Callum  Owen

Callum Owen

1662392470

How to Set up Onboarding Screens in React Native App

Onboarding screens are a very effective way to learn how to use an application, facts about the application, and some features of the application can be visually demonstrated to new users. This is possible as it is the first screen the user interacts with just after installing and opening the app.

After the app’s initial launch, the Onboarding Screens aren’t expected to show up. In this tutorial, I will be showing you how to set up onboarding screens for Android and iOS Applications in React Native.

See more at: https://blog.openreplay.com/setting-up-onboarding-screens-in-react-native

#reactnative #mobileapp #react

How to Set up Onboarding Screens in React Native App
Thierry  Perret

Thierry Perret

1662385200

Comment Configurer Les écrans D'intégration Dans React Native

Les écrans d'intégration sont un moyen très efficace d'apprendre à utiliser une application, des faits sur l'application et certaines fonctionnalités de l'application peuvent être démontrées visuellement aux nouveaux utilisateurs. Ceci est possible car il s'agit du premier écran avec lequel l'utilisateur interagit juste après l'installation et l'ouverture de l'application.

Après le lancement initial de l'application, les écrans d'intégration ne devraient pas apparaître. Dans ce tutoriel, je vais vous montrer comment configurer des écrans d'intégration pour les applications Android et iOS dans React Native .

Le code source complet de ce tutoriel est disponible sur Github . Pour suivre ce didacticiel, une connaissance de base de React Native est essentielle et vous devez avoir configuré React Native sur votre ordinateur. Un simulateur Android et un simulateur iOS devraient également être mis en place pour tester l'application.

Cloner une application simple

Vous devez vous diriger vers Github et cloner le projet de démonstration . C'est l'application que je vais utiliser pour ce tutoriel. J'ai configuré React Navigation pour la navigation de l'application. Pour plus d'informations et comment démarrer avec React Navigation, cliquez ici . Vous pouvez également voir comment utiliser React Navigation dans vos projets en cliquant ici .

Une fois que vous avez cloné le projet, vous devez l'ouvrir avec votre éditeur de code, et dans le terminal, vous devez exécuter les commandes ci-dessous, qui installeront les modules de nœud pour le projet et configureront l'application pour iOS.

npm install

#Setting up iOS
cd ios && pod install

#Navigate back to the main folder
cd ..

Après avoir terminé ce processus, vous devez créer l'application sur vos émulateurs Android et iOS à l'aide du code ci-dessous.

#Build on Android
npx react-native run-android

#Build on iOS
npx react-native run-ios

Votre application devrait s'afficher comme ceci :

1 affichage d'application par défaut sur Android et iOS

Configuration des écrans d'accueil

Maintenant, je vais passer en revue l'installation de la bibliothèque que j'utiliserai pour démontrer la mise en œuvre des écrans d'intégration dans votre projet React Native.

La bibliothèque particulière que j'utiliserai est le React Native Onboarding Swiper . Cette bibliothèque React Native est assez robuste et personnalisable. Pour aller de l'avant, vous devez installer la bibliothèque à l'aide de la commande ci-dessous.

npm i react-native-onboarding-swiper
cd ios && pod install

Après l'installation d'une bibliothèque, il est important qu'elle pod installsoit exécutée pour télécharger les fichiers nécessaires au bon fonctionnement d'iOS.

Dès que vous installez la bibliothèque, vous devez créer vos applications Android et iOS à l'aide de la commande susmentionnée. C'est également une étape très importante qui vous aidera à éviter les erreurs résultant du fait que vos applications ne sont pas synchronisées avec la bibliothèque que vous venez d'installer.

Lorsque votre construction est terminée, ouvrez le dossier d'écran déjà créé et, dans ce dossier, ouvrez OnboardingScreen.js. C'est là que les balayages d'intégration seront créés.

Pour créer les balayages d'intégration, le composant d'intégration doit avoir certaines propriétés requises. Le composant "pages" est un tableau qui contient d'autres accessoires requis tels que backgroundColor, image, title et subtitle.

Vous devez créer plus d'objets dans le pagestableau pour avoir plusieurs balayages d'intégration.

Création des balayages d'intégration

La première chose à faire est de créer un dossier dans le répertoire racine du projet, nommez-le assetscomme c'est là que se trouveront les images qui seront ajoutées à l'écran d'accueil, puis ajoutez quelques images dans le dossier. Ensuite, importez le React Native Onboarding Swiper dans votre projet en utilisant le code ci-dessous.

import Onboarding from 'react-native-onboarding-swiper';

Cela devrait être ajouté juste en dessous des importations en haut de la page. Dans la fonction OnboardingScreen, supprimez la vue et renvoyez le code d'intégration ci-dessous.

<Onboarding
    pages={[
    {
    backgroundColor: '#a6e4d0',
    image: <Image source={require('../assets/list.png')} />,
    title: 'Welcome',
    subtitle: 'Welcome to the first slide of the Onboarding Swiper.',
    },
    ]}
/>

Vous n'aurez peut-être pas la même image que la mienne, mais vos applications devraient s'afficher comme ceci sur Android et iOS :

2 One Slide Display sur Android et iOS

Pour ajouter plus d'écrans, vous devez créer plus d'objets dans le tableau. Un exemple de ce que j'ai fait est donc:

pages={[
    {
        backgroundColor: '#a6e4d0',
        image: <Image source={require('../assets/list.png')} />,
        title: 'Welcome',
        subtitle: 'Welcome to the first slide of the Onboarding Swiper.',
    },
    {
        backgroundColor: '#fdeb93',
        image: <Image source={require('../assets/megaphone.png')} />,
        title: 'Explore',
        subtitle: 'This is the second slide of the Onboarding Swiper.',
    },
    {
        backgroundColor: '#e9bcbe',
        image: <Image source={require('../assets/like.png')} />,
        title: 'All Done',
        subtitle: 'This is the Third slide of the Onboarding Swiper.',
    },

Une fois que vous avez ajouté ceci, votre application devrait pouvoir glisser et s'afficher comme ceci :

3

Si vous cliquez sur les boutons Ignorer et Terminé, vous constaterez qu'ils n'effectueront aucune action, et pour résoudre ce problème, vous devez saisir les accessoires onSkipet onDoneque vous utiliserez pour diriger l'utilisateur vers la première page s'ils sont cliqués . La première page de cette application de démonstration est la page d'accueil ; par conséquent, je vais naviguer vers la page d'accueil. Le code doit être ajouté dans le composant d'intégration.

<Onboarding
//To handle the navigation to the Homepage if Skip is clicked
onSkip={() => navigation.replace("Home")}

//To handle the navigation to the Homepage after Done is clicked
onDone={() => navigation.replace("Home")}
pages={[
    ...
    ]}
/>

Une fois cela ajouté, vous devriez essayer de cliquer sur Ignorer et Terminé, ce qui devrait vous amener à la page d'accueil.

Vous pouvez personnaliser davantage ces balayages à l'aide des accessoires indiqués ici. Pour l'instant, je vais faire une petite personnalisation, comme utiliser du texte au lieu d'une icône pour le bouton Terminé. Ensuite, je changerai la façon dont les indicateurs de balayage s'affichent.

À partir de Done, vous devez inclure TouchableOpacityune importation à partir de React Native ; puis, créez une fonction Done qui sera affectée à l' DoneButtonComponentaccessoire dans le composant Onboarding. Voir le code ci-dessous :

const Done = ({...props}) => (
    <TouchableOpacity
    {...props}
    >
    <Text style={{fontSize:16, marginHorizontal:20}}>Done</Text>
    </TouchableOpacity>
)

Maintenant, dans le composant Onboarding, incluez le code ci-dessous pour attribuer la fonction Done que vous venez de créer au fichier DoneButtonComponent. Cela fera maintenant apparaître le bouton Terminé sous forme de texte, pas d'icône.

<Onboarding
    ...
    DoneButtonComponent={Done}
    pages=[{
        ...
    ]}
/>

Cela fera maintenant apparaître le bouton Terminé sous forme de texte, pas d'icône. Vos applications devraient s'afficher comme ceci :

4 Le bouton Terminé a été remplacé par du texte au lieu de l'icône sur Android et iOS

La prochaine chose que je vais personnaliser dans ce tutoriel est l'indicateur d'écran d'intégration. Pour ce faire, je vais créer une autre fonction. Cette fonction Dot transformera les indicateurs carrés en un indicateur rectangulaire et rendra la diapositive sélectionnée bleue et les autres côtés noirs.

const Dots = ({selected}) => {
    let backgroundColor;
    backgroundColor = selected ? 'blue' : 'black'
    return (
    <View
    style={{
        width:24,
        height:6,
        marginHorizontal:3,
        backgroundColor
    }}
    />
    )
}

Ce code devrait faire apparaître votre application comme ceci :

5 points de balayage transformés en rectangles Affichage iOS et Android

Création du flux utilisateur

L'écran d'intégration que vous venez de configurer à la suite du didacticiel s'affichera toujours en premier dès que votre application sera ouverte, et ce n'est pas ainsi que l'écran d'intégration est censé se dérouler.

Lors de la création du flux d'utilisateurs, vous souhaitez configurer l'écran d'intégration pour qu'il n'apparaisse que lors de la toute première installation de votre application, et c'est ce que je vais vous montrer à faire maintenant.

Comment cela fonctionnera est que lorsque l'utilisateur installe ou ouvre votre application pour la première fois, l'application montre à l'utilisateur l'écran d'intégration, et dès que l'utilisateur a interagi avec les écrans d'intégration, l'application stockera une chaîne de données sur le dispositif. L'application vérifiera toujours ce code ; si le code existe, l'écran d'accueil ne s'affichera pas ; par conséquent, l'utilisateur sera directement redirigé vers la page d'accueil. Si l'application est ouverte pour la première fois, le code n'existera pas ; par conséquent, l'écran d'intégration s'affichera.

Pour que l'application enregistre les données de chaîne de l'application, j'utiliserai AsyncStorage. Ce package permet de stocker des fichiers et de les rendre accessibles hors ligne. Vous pouvez en savoir plus AsyncStorage ici .

Vous devez installer React Native AsyncStorage et reconstruire votre application Android et iOS. Le code pour le faire est ci-dessous :

npm i @react-native-async-storage/async-storage
    
cd ios && pod install

Une fois installé, reconstruisez votre application pour Android et iOS à l'aide de la commande indiquée plus haut dans cet article.

Une fois cela fait, ouvrez votre app.js. Dans app.js, vous devez importer le AsyncStorage en haut de la page avec le code ci-dessous.

import AsyncStorage from '@react-native-async-storage/async-storage';

Je vais créer une variable d'état pour le premier lancement de l'application et une fonction pour mettre à jour le firstLaunch à l'aide du hook React useState . Après cela, en utilisant React useEffect Hook , je créerai une fonction asynchrone qui vérifiera l'élément de chaîne, appLaunched, dans AsyncStorage chaque fois que l'application est ouverte. Si l'élément de chaîne est nul, l'application est ouverte pour la première fois ; la fonction setFirstLaunch mettra à jour firstLaunch sur true et l'écran d'intégration s'affichera.

D'un autre côté, si l'élément de chaîne appLaunchedest trouvé dans AsyncStorage, la fonction setFirstLaunch mettra à jour l'état firstLaunch sur false et l'écran d'intégration ne s'affichera pas. à la place, l'utilisateur sera dirigé directement vers la page d'accueil. Le code est ci-dessous.

const App = () => {
  const [firstLaunch, setFirstLaunch] = React.useState(null);
  React.useEffect(() => {
    async function setData() {
      const appData = await AsyncStorage.getItem("appLaunched");
      if (appData == null) {
        setFirstLaunch(true);
        AsyncStorage.setItem("appLaunched", "false");
      } else {
        setFirstLaunch(false);
      }
    }
    setData();
  }, []);
  return ...
};

Notez que j'ai dû créer une fonction à l'intérieur du useEffectbloc car le processus doit s'exécuter de manière asynchrone, d'où la nécessité d'une fonction asynchrone. Cependant, la fonction async est appelée immédiatement à l'intérieur du bloc useEffect pour lui faire exécuter l'action indiquée.

Le processus final que vous devez effectuer consiste à définir la navigation de l'application pour afficher l'écran d'intégration si l'état firstLaunch est vrai, et si l'état firstLaunch est faux, il doit diriger l'utilisateur vers la page d'accueil. Le code est ci-dessous.

return (
  firstLaunch != null && (
    <NavigationContainer>
      <Stack.Navigator>
        {firstLaunch && (
          <Stack.Screen
            options={{ headerShown: false }}
            name="Onboarding"
            component={OnboardingScreen}
          />
        )}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
);

Après avoir mis à jour votre bloc de retour comme indiqué ci-dessus, vous devez tester l'application. Votre application devrait vous montrer l'écran d'intégration, et si vous cliquez sur les boutons Ignorer ou Terminé, vous ne verrez pas l'écran d'intégration lorsque vous relancerez l'application sur Android et iOS.

Vous devez effacer les données de l'application sur votre émulateur Android et supprimer l'application de votre simulateur iOS, puis reconstruire l'application à l'aide de npx react-native run-ios et npx react-native run-android. Vous devriez voir les écrans d'intégration une fois ; après cela, il ne devrait plus apparaître.

6 L'application Android et iOS accède directement à la page d'accueil après l'exécution initiale de l'application

Conclusion

Les écrans d'accueil, qui sont un moyen très efficace et intéressant d'éduquer les nouveaux utilisateurs sur les utilisations clés de votre application, ne doivent pas être oubliés dans votre développement. J'ai pu illustrer à quel point il peut être possible et simple de l'implémenter dans votre application React Native, et j'espère que ce que j'ai partagé ici vous aidera. Veuillez nous contacter si vous rencontrez des difficultés ; Je serai très désireux d'aider.

Lien : https://blog.openreplay.com/setting-up-onboarding-screens-in-react-native

#reactnative #mobileapp #react

Comment Configurer Les écrans D'intégration Dans  React Native
加藤  七夏

加藤 七夏

1662374341

如何在 React Native 應用程序中設置入職屏幕

入職屏幕是學習如何使用應用程序的一種非常有效的方式,可以向新用戶直觀地展示有關應用程序的事實以及應用程序的某些功能。這是可能的,因為它是用戶在安裝和打開應用程序後與之交互的第一個屏幕。

應用程序首次啟動後,預計不會出現入職屏幕。在本教程中,我將向您展示如何在React Native中為 Android 和 iOS 應用程序設置引導屏幕

本教程的完整源代碼可在Github上找到。要學習本教程,React Native 的基本知識是必不可少的,您應該在您的計算機上設置 React Native。還應設置 Android 和 iOS 模擬器來測試應用程序。

克隆簡單的應用程序

您必須前往 Github 並克隆演示項目。這就是我將在本教程中使用的應用程序。我已經為應用程序的導航設置了React Navigation。有關更多信息以及如何開始使用 React Navigation,請單擊此處您還可以通過單擊此處了解如何在您的項目中使用 React Navigation 。

克隆項目後,您應該使用代碼編輯器打開它,然後在終端中運行以下命令,這將為項目安裝節點模塊並為 iOS 設置應用程序。

npm install

#Setting up iOS
cd ios && pod install

#Navigate back to the main folder
cd ..

完成此過程後,您應該使用以下代碼在 Android 和 iOS 模擬器上構建應用程序。

#Build on Android
npx react-native run-android

#Build on iOS
npx react-native run-ios

您應該讓您的應用程序顯示如下:

1 Android 和 iOS 上的默認應用顯示

設置入職屏幕

現在,我將安裝庫,我將使用它來演示在 React Native 項目中實現入職屏幕。

我將使用的特定庫是React Native Onboarding Swiper。這個 React Native 庫非常健壯且可定制。要繼續前進,您應該使用以下命令安裝庫。

npm i react-native-onboarding-swiper
cd ios && pod install

安裝庫後,pod install運行以下載必要的文件以使 iOS 正常運行非常重要。

安裝庫後,您應該使用上述命令構建您的 Android 和 iOS 應用程序。這也是一個非常重要的步驟,它將幫助您避免由於您的應用程序與您剛剛安裝的庫不同步而導致的錯誤。

構建完成後,打開已創建的屏幕文件夾,並在該文件夾中打開 OnboardingScreen.js。這是創建入職滑動的地方。

要創建入職滑動,入職組件必須具有一些必需的屬性。“pages”組件是一個數組,其中包含其他必需的道具,例如背景顏色、圖像、標題和副標題。

您必須在數組中創建更多對象pages才能進行多次入職滑動。

創建入職滑動

首先要做的是在項目的根目錄中創建一個文件夾,將其命名assets為將添加到 Onboarding Screen 的圖像所在的位置,然後將一些圖像添加到該文件夾中。接下來,使用以下代碼將React Native Onboarding Swiper導入您的項目。

import Onboarding from 'react-native-onboarding-swiper';

這應該添加到頁面頂部的導入下方。在 OnboardingScreen 函數中,刪除視圖並返回下面的入職代碼。

<Onboarding
    pages={[
    {
    backgroundColor: '#a6e4d0',
    image: <Image source={require('../assets/list.png')} />,
    title: 'Welcome',
    subtitle: 'Welcome to the first slide of the Onboarding Swiper.',
    },
    ]}
/>

您可能沒有顯示與我相同的圖像,但您的應用程序應該在 Android 和 iOS 上顯示如下:

2 Android 和 iOS 上的單張幻燈片顯示

要添加更多屏幕,您應該在數組中創建更多對象。因此,我所做的一個例子是:

pages={[
    {
        backgroundColor: '#a6e4d0',
        image: <Image source={require('../assets/list.png')} />,
        title: 'Welcome',
        subtitle: 'Welcome to the first slide of the Onboarding Swiper.',
    },
    {
        backgroundColor: '#fdeb93',
        image: <Image source={require('../assets/megaphone.png')} />,
        title: 'Explore',
        subtitle: 'This is the second slide of the Onboarding Swiper.',
    },
    {
        backgroundColor: '#e9bcbe',
        image: <Image source={require('../assets/like.png')} />,
        title: 'All Done',
        subtitle: 'This is the Third slide of the Onboarding Swiper.',
    },

添加後,您的應用應該能夠像這樣滑動並顯示:

3

如果您單擊 Skip 和 Done 按鈕,您會發現它們不會執行任何操作,並且要解決此問題,您需要獲取onSkiponDone道具,如果它們被單擊,您將使用它們將用戶導航到第一頁. 這個演示應用程序的第一頁是主頁;因此,我將導航到主頁。代碼應添加到入職組件中。

<Onboarding
//To handle the navigation to the Homepage if Skip is clicked
onSkip={() => navigation.replace("Home")}

//To handle the navigation to the Homepage after Done is clicked
onDone={() => navigation.replace("Home")}
pages={[
    ...
    ]}
/>

添加後,您應該嘗試單擊“跳過並完成”,這應該會將您帶到主頁。

您可以使用此處所述的道具進一步自定義這些滑動。現在,我將進行一些自定義,例如使用文本而不是完成按鈕的圖標。然後,我將更改滑動指示器的顯示方式。

從 Done 開始,你應該TouchableOpacity從 React Native 導入;然後,創建一個 Done 函數,該函數將分配給DoneButtonComponentOnboarding 組件中的 prop。請看下面的代碼:

const Done = ({...props}) => (
    <TouchableOpacity
    {...props}
    >
    <Text style={{fontSize:16, marginHorizontal:20}}>Done</Text>
    </TouchableOpacity>
)

現在在 Onboarding 組件中,包含以下代碼以將剛剛創建的 Done 函數分配給DoneButtonComponent. 現在,這將使“完成”按鈕顯示為文本,而不是圖標。

<Onboarding
    ...
    DoneButtonComponent={Done}
    pages=[{
        ...
    ]}
/>

現在,這將使“完成”按鈕顯示為文本,而不是圖標。您應該讓您的應用程序顯示如下:

4 完成按鈕更改為文本而不是 Android 和 iOS 上的圖標

我將在本教程中自定義的下一件事是入職屏幕指示器。為此,我將創建另一個函數。此 Dot 函數會將方形指示器轉換為矩形指示器,並使選定的幻燈片變為藍色,而將其他邊變為黑色。

const Dots = ({selected}) => {
    let backgroundColor;
    backgroundColor = selected ? 'blue' : 'black'
    return (
    <View
    style={{
        width:24,
        height:6,
        marginHorizontal:3,
        backgroundColor
    }}
    />
    )
}

此代碼應該讓您的應用程序顯示如下:

5 個 Swiper 點轉換為矩形 iOS 和 Android 顯示

創建用戶流

您剛剛按照教程設置的入職屏幕將始終在您的應用打開後首先顯示,這不是入職屏幕應該如何流動的方式。

在創建用戶流程時,您希望將引導屏幕設置為僅在首次安裝應用程序時顯示,這就是我現在將向您展示的內容。

這是如何工作的,當用戶第一次安裝或打開你的應用程序時,應用程序會向用戶顯示引導屏幕,一旦用戶與引導屏幕交互,應用程序就會在設備。該應用程序將始終檢查此代碼;如果代碼存在,則不會顯示入職屏幕;因此,用戶將被直接帶到主頁。首次打開應用,代碼不存在;因此,將顯示入職屏幕。

為了讓應用程序保存應用程序中的字符串數據,我將使用AsyncStorage. 該軟件包有助於存儲文件並使它們可以離線訪問。AsyncStorage 您可以在此處了解更多信息。

你應該安裝React Native AsyncStorage並重建你的 Android 和 iOS 應用程序。執行此操作的代碼如下:

npm i @react-native-async-storage/async-storage
    
cd ios && pod install

安裝後,使用本文前面所述的命令為 Android 和 iOS 重建應用程序。

完成後,打開您的 app.js。在 app.js 中,您應該使用以下代碼在頁面頂部導入 AsyncStorage。

import AsyncStorage from '@react-native-async-storage/async-storage';

我將為應用程序的首次啟動創建一個狀態變量,並使用React useState hook創建一個更新 firstLaunch 的函數。之後,使用React useEffect Hook我將創建一個異步函數,該函數將在應用程序打開時檢查 AsyncStorage 中的字符串項 appLaunched。如果字符串item為null,則應用第一次打開;setFirstLaunch 函數會將 firstLaunch 更新為 true,並顯示入職屏幕。

另一方面,如果appLaunched在 AsyncStorage 中找到字符串項,則 setFirstLaunch 函數會將 firstLaunch 狀態更新為 false,並且不會顯示引導屏幕;相反,用戶將被直接引導至主頁。代碼如下。

const App = () => {
  const [firstLaunch, setFirstLaunch] = React.useState(null);
  React.useEffect(() => {
    async function setData() {
      const appData = await AsyncStorage.getItem("appLaunched");
      if (appData == null) {
        setFirstLaunch(true);
        AsyncStorage.setItem("appLaunched", "false");
      } else {
        setFirstLaunch(false);
      }
    }
    setData();
  }, []);
  return ...
};

請注意,我必須在useEffect塊內創建一個函數,因為該進程需要異步運行,因此需要一個異步函數。但是,在 useEffect 塊內立即調用 async 函數以使其執行規定的操作。

您應該做的最後一個過程是將應用導航設置為在 firstLaunch 狀態為 true 時顯示引導屏幕,如果 firstLaunch 狀態為 false,它應該將用戶導航到主頁。代碼如下。

return (
  firstLaunch != null && (
    <NavigationContainer>
      <Stack.Navigator>
        {firstLaunch && (
          <Stack.Screen
            options={{ headerShown: false }}
            name="Onboarding"
            component={OnboardingScreen}
          />
        )}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
);

將您的返回塊更新為上述內容後,您應該測試該應用程序。您的應用程序應該向您顯示載入屏幕,如果您單擊“跳過”或“完成”按鈕,當您在 Android 和 iOS 上重新運行應用程序時,您將不會看到載入屏幕。

您應該清除 Android 模擬器上的應用程序數據並從 iOS 模擬器中刪除應用程序,然後使用 npx react-native run-ios 和 npx react-native run-android 重建應用程序。您應該會看到一次入職屏幕;在那之後,它不應該再出現了。

6 Android和iOS App初次運行後直接進入首頁

結論

入門屏幕是一種非常有效且有趣的方式來教育新用戶了解應用程序的關鍵用途,不應在您的開發中被遺漏。我已經能夠說明在你的 React Native 應用程序中實現它是多麼可能和簡單,我希望我在這里分享的內容對你有所幫助。如果您遇到任何挑戰,請與我們聯繫;我會非常樂意提供幫助。

鏈接:https ://blog.openreplay.com/setting-up-onboarding-screens-in-react-native

#reactnative #mobileapp #react

如何在 React Native 應用程序中設置入職屏幕
Dang  Tu

Dang Tu

1662367085

Cách Thiết Lập Màn Hình Tích Hợp Trong ứng Dụng React Native

Màn hình giới thiệu là một cách rất hiệu quả để học cách sử dụng một ứng dụng, thông tin về ứng dụng và một số tính năng của ứng dụng có thể được chứng minh trực quan cho người dùng mới. Điều này có thể thực hiện được vì đây là màn hình đầu tiên mà người dùng tương tác ngay sau khi cài đặt và mở ứng dụng.

Sau lần khởi chạy đầu tiên của ứng dụng, màn hình tích hợp sẽ không hiển thị. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thiết lập màn hình tích hợp cho Ứng dụng Android và iOS trong React Native .

Mã nguồn hoàn chỉnh của hướng dẫn này có sẵn trên Github . Để làm theo hướng dẫn này, kiến ​​thức cơ bản về React Native là rất cần thiết và bạn nên thiết lập React Native trên máy tính của mình. Trình mô phỏng Android và iOS cũng nên được thiết lập để thử nghiệm ứng dụng.

Ứng dụng nhân bản đơn giản

Bạn phải truy cập Github và sao chép dự án demo . Đó là ứng dụng tôi sẽ sử dụng cho hướng dẫn này. Tôi đã thiết lập Điều hướng phản ứng cho điều hướng của ứng dụng. Để biết thêm thông tin và cách bắt đầu với React Navigation, hãy nhấp vào đây . Bạn cũng có thể xem cách sử dụng React Navigation trong các dự án của mình bằng cách nhấp vào đây .

Khi bạn đã nhân bản dự án, bạn nên mở nó bằng trình chỉnh sửa mã của mình và trong terminal, bạn nên chạy các lệnh bên dưới, các lệnh này sẽ cài đặt các mô-đun nút cho dự án và thiết lập ứng dụng cho iOS.

npm install

#Setting up iOS
cd ios && pod install

#Navigate back to the main folder
cd ..

Sau khi hoàn tất quá trình này, bạn nên xây dựng ứng dụng trên Trình giả lập Android và iOS của mình bằng đoạn mã bên dưới.

#Build on Android
npx react-native run-android

#Build on iOS
npx react-native run-ios

Bạn sẽ có ứng dụng của mình hiển thị như sau:

1 Màn hình ứng dụng mặc định trên Android và iOS

Thiết lập màn hình giới thiệu

Bây giờ, tôi sẽ xem xét cài đặt thư viện mà tôi sẽ sử dụng để chứng minh việc triển khai Màn hình tích hợp trong dự án React Native của bạn.

Thư viện cụ thể mà tôi sẽ sử dụng là React Native Onboarding Swiper . Thư viện React Native này khá mạnh mẽ và có thể tùy chỉnh. Để tiếp tục, bạn nên cài đặt thư viện bằng lệnh bên dưới.

npm i react-native-onboarding-swiper
cd ios && pod install

Sau khi cài đặt thư viện, điều quan trọng pod installlà phải chạy để tải xuống các tệp cần thiết để iOS hoạt động bình thường.

Ngay sau khi cài đặt thư viện, bạn nên xây dựng các ứng dụng Android và iOS của mình bằng cách sử dụng lệnh đã đề cập ở trên. Đây cũng là một bước rất quan trọng giúp bạn tránh được những lỗi do ứng dụng của bạn không đồng bộ với thư viện mà bạn vừa cài đặt.

Khi quá trình xây dựng của bạn hoàn tất, hãy mở thư mục màn hình đã tạo và trong thư mục đó, hãy mở OnboardingScreen.js. Đây là nơi mà các Vuốt giới thiệu sẽ được tạo.

Để tạo các Vuốt giới thiệu, có một số thuộc tính bắt buộc mà thành phần Giới thiệu phải có. Thành phần “trang” là một mảng bao gồm các đạo cụ bắt buộc khác như backgroundColor, hình ảnh, tiêu đề và phụ đề.

Bạn phải tạo nhiều đối tượng hơn trong pagesmảng để có nhiều lần vuốt tích hợp.

Tạo các thao tác vuốt giới thiệu

Điều đầu tiên cần làm là tạo một thư mục trong thư mục gốc của dự án, đặt tên cho nó assetsvì nó là nơi chứa các hình ảnh sẽ được thêm vào Màn hình tổng hợp sau đó thêm một số hình ảnh vào thư mục. Tiếp theo, nhập React Native Onboarding Swiper vào dự án của bạn bằng cách sử dụng mã bên dưới.

import Onboarding from 'react-native-onboarding-swiper';

Điều này sẽ được thêm ngay bên dưới phần nhập ở đầu trang. Trong chức năng OnboardingScreen, hãy xóa chế độ xem và trả lại mã giới thiệu bên dưới.

<Onboarding
    pages={[
    {
    backgroundColor: '#a6e4d0',
    image: <Image source={require('../assets/list.png')} />,
    title: 'Welcome',
    subtitle: 'Welcome to the first slide of the Onboarding Swiper.',
    },
    ]}
/>

Bạn có thể không có hình ảnh hiển thị giống như hình ảnh của tôi, nhưng bạn nên để các ứng dụng của mình hiển thị như thế này trên Android và iOS:

2 Màn hình một slide trên Android và iOS

Để thêm nhiều màn hình hơn, bạn nên tạo nhiều đối tượng hơn trong mảng. Một ví dụ về những gì tôi đã làm là:

pages={[
    {
        backgroundColor: '#a6e4d0',
        image: <Image source={require('../assets/list.png')} />,
        title: 'Welcome',
        subtitle: 'Welcome to the first slide of the Onboarding Swiper.',
    },
    {
        backgroundColor: '#fdeb93',
        image: <Image source={require('../assets/megaphone.png')} />,
        title: 'Explore',
        subtitle: 'This is the second slide of the Onboarding Swiper.',
    },
    {
        backgroundColor: '#e9bcbe',
        image: <Image source={require('../assets/like.png')} />,
        title: 'All Done',
        subtitle: 'This is the Third slide of the Onboarding Swiper.',
    },

Khi bạn đã thêm điều này, ứng dụng của bạn sẽ có thể vuốt và hiển thị như thế này:

3

Nếu bạn nhấp vào nút Bỏ qua và Hoàn tất, bạn sẽ thấy rằng họ sẽ không thực hiện bất kỳ hành động nào và để khắc phục điều đó, bạn cần lấy onSkipvà các onDoneđạo cụ mà bạn sẽ sử dụng để điều hướng người dùng đến trang đầu tiên nếu họ được nhấp . Trang đầu tiên trên ứng dụng demo này là Trang chủ; do đó, tôi sẽ điều hướng đến Trang chủ. Mã phải được thêm vào trong Thành phần giới thiệu.

<Onboarding
//To handle the navigation to the Homepage if Skip is clicked
onSkip={() => navigation.replace("Home")}

//To handle the navigation to the Homepage after Done is clicked
onDone={() => navigation.replace("Home")}
pages={[
    ...
    ]}
/>

Khi điều đó được thêm vào, bạn nên thử nhấp vào Bỏ qua và Hoàn tất, thao tác này sẽ đưa bạn đến Trang chủ.

Bạn có thể tùy chỉnh thêm các thao tác vuốt này bằng cách sử dụng các đạo cụ được nêu ở đây. Hiện tại, tôi sẽ thực hiện một chút tùy chỉnh, chẳng hạn như sử dụng văn bản thay vì biểu tượng cho nút Xong. Sau đó, tôi sẽ thay đổi cách các chỉ báo vuốt hiển thị.

Bắt đầu với Xong, bạn nên bao gồm TouchableOpacitydưới dạng nhập từ React Native; sau đó, tạo một chức năng Xong sẽ được chỉ định cho phần DoneButtonComponenthỗ trợ trong thành phần Giới thiệu. Xem đoạn mã bên dưới:

const Done = ({...props}) => (
    <TouchableOpacity
    {...props}
    >
    <Text style={{fontSize:16, marginHorizontal:20}}>Done</Text>
    </TouchableOpacity>
)

Bây giờ bên trong thành phần Giới thiệu, hãy bao gồm mã bên dưới để gán chức năng Xong vừa tạo cho DoneButtonComponent. Thao tác này sẽ làm cho nút Xong xuất hiện dưới dạng văn bản chứ không phải biểu tượng.

<Onboarding
    ...
    DoneButtonComponent={Done}
    pages=[{
        ...
    ]}
/>

Thao tác này sẽ làm cho nút Xong xuất hiện dưới dạng văn bản chứ không phải biểu tượng. Bạn sẽ có các ứng dụng của mình hiển thị như sau:

4 Nút Xong Được thay đổi thành Văn bản thay vì biểu tượng trên Android và iOS

Điều tiếp theo tôi sẽ tùy chỉnh trong hướng dẫn này là chỉ báo màn hình tích hợp. Để làm điều này, tôi sẽ tạo một chức năng khác. Chức năng Dot này sẽ biến đổi các chỉ báo hình vuông thành một chỉ báo hình chữ nhật và làm cho trang chiếu đã chọn có màu xanh lam và các mặt còn lại là màu đen.

const Dots = ({selected}) => {
    let backgroundColor;
    backgroundColor = selected ? 'blue' : 'black'
    return (
    <View
    style={{
        width:24,
        height:6,
        marginHorizontal:3,
        backgroundColor
    }}
    />
    )
}

Mã này sẽ hiển thị ứng dụng của bạn như sau:

5 Swiper Dots được chuyển đổi thành hình chữ nhật Màn hình iOS và Android

Tạo luồng người dùng

Màn hình tích hợp bạn vừa thiết lập theo hướng dẫn sẽ luôn hiển thị đầu tiên ngay sau khi ứng dụng của bạn được mở và đó không phải là cách màn hình giới thiệu được cho là chạy.

Khi tạo luồng người dùng, bạn muốn thiết lập màn hình giới thiệu để chỉ hiển thị trong lần cài đặt ứng dụng đầu tiên của bạn và đó là những gì tôi sẽ hướng dẫn bạn làm ngay bây giờ.

Điều này sẽ hoạt động như thế nào là khi người dùng cài đặt hoặc mở ứng dụng của bạn lần đầu tiên, ứng dụng sẽ hiển thị cho người dùng màn hình giới thiệu và ngay sau khi người dùng đã tương tác với các màn hình giới thiệu, ứng dụng sẽ lưu trữ một chuỗi dữ liệu trên thiết bị. Ứng dụng sẽ luôn kiểm tra mã này; nếu mã tồn tại, màn hình giới thiệu sẽ không được hiển thị; do đó, người dùng sẽ được đưa thẳng đến Trang chủ. Nếu ứng dụng được mở lần đầu tiên, mã sẽ không tồn tại; do đó, màn hình giới thiệu sẽ được hiển thị.

Để ứng dụng lưu dữ liệu chuỗi từ ứng dụng, tôi sẽ sử dụng AsyncStorage. Gói này giúp lưu trữ các tệp và làm cho chúng có thể truy cập ngoại tuyến. Bạn có thể tìm hiểu thêm về AsyncStorage tại đây .

Bạn nên cài đặt React Native AsyncStorage và xây dựng lại ứng dụng Android và iOS của mình. Mã để làm điều đó dưới đây:

npm i @react-native-async-storage/async-storage
    
cd ios && pod install

Sau khi cài đặt này, hãy xây dựng lại ứng dụng của bạn cho Android và iOS bằng lệnh được nêu trước đó trong bài viết này.

Sau khi hoàn tất, hãy mở app.js. Trong app.js, bạn nên nhập AsyncStorage ở đầu trang với mã bên dưới.

import AsyncStorage from '@react-native-async-storage/async-storage';

Tôi sẽ tạo một biến trạng thái cho lần khởi chạy đầu tiên của ứng dụng và một hàm để cập nhật lần khởi chạy đầu tiên bằng cách sử dụng móc React useState . Sau đó, bằng cách sử dụng React useEffect Hook , tôi sẽ tạo một hàm không đồng bộ sẽ kiểm tra mục chuỗi, appLaunched, trong AsyncStorage bất cứ khi nào ứng dụng được mở. Nếu mục chuỗi là null, ứng dụng được mở lần đầu tiên; chức năng setFirstLaunch sẽ cập nhật firstLaunch thành true và màn hình giới thiệu sẽ hiển thị.

Mặt khác, nếu mục chuỗi appLaunchedđược tìm thấy trong AsyncStorage, thì hàm setFirstLaunch sẽ cập nhật trạng thái firstLaunch thành false và màn hình giới thiệu sẽ không hiển thị; thay vào đó, người dùng sẽ được chuyển thẳng đến Trang chủ. Đoạn mã dưới đây.

const App = () => {
  const [firstLaunch, setFirstLaunch] = React.useState(null);
  React.useEffect(() => {
    async function setData() {
      const appData = await AsyncStorage.getItem("appLaunched");
      if (appData == null) {
        setFirstLaunch(true);
        AsyncStorage.setItem("appLaunched", "false");
      } else {
        setFirstLaunch(false);
      }
    }
    setData();
  }, []);
  return ...
};

Lưu ý rằng tôi phải tạo một hàm bên trong useEffectkhối vì quá trình này cần chạy không đồng bộ do đó cần một hàm không đồng bộ. Tuy nhiên, hàm async được gọi ngay bên trong khối useEffect để nó thực hiện hành động đã nêu.

Quá trình cuối cùng bạn nên làm là đặt điều hướng ứng dụng để hiển thị màn hình giới thiệu nếu trạng thái FirstLaunch là đúng và nếu trạng thái FirstLaunch là false, nó sẽ điều hướng người dùng đến Trang chủ. Đoạn mã dưới đây.

return (
  firstLaunch != null && (
    <NavigationContainer>
      <Stack.Navigator>
        {firstLaunch && (
          <Stack.Screen
            options={{ headerShown: false }}
            name="Onboarding"
            component={OnboardingScreen}
          />
        )}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
);

Sau khi cập nhật khối trả lại của bạn thành quy định ở trên, bạn nên kiểm tra ứng dụng. Ứng dụng của bạn sẽ hiển thị cho bạn màn hình giới thiệu và nếu bạn nhấp vào nút Bỏ qua hoặc Xong, bạn sẽ không thấy màn hình giới thiệu khi bạn chạy lại ứng dụng trên Android và iOS.

Bạn nên xóa dữ liệu ứng dụng trên trình giả lập Android và xóa ứng dụng khỏi trình mô phỏng iOS, sau đó xây dựng lại ứng dụng bằng npx react-native run-ios và npx react-native run-android. Bạn sẽ thấy các màn hình giới thiệu một lần; sau đó, nó sẽ không hiển thị nữa.

6 Ứng dụng Android và iOS chuyển thẳng đến Trang chủ sau lần chạy ứng dụng đầu tiên

Sự kết luận

Giới thiệu màn hình là một cách rất hiệu quả và thú vị để giáo dục người dùng mới về các công dụng chính của ứng dụng của bạn, không nên bỏ qua trong quá trình phát triển của bạn. Tôi đã có thể minh họa mức độ khả thi và đơn giản của nó để triển khai trong ứng dụng React Native của bạn và tôi hy vọng những gì tôi chia sẻ ở đây sẽ giúp ích cho bạn. Vui lòng liên hệ nếu bạn gặp bất kỳ thách thức nào; Tôi sẽ rất mong muốn được giúp đỡ.

Liên kết: https://blog.openreplay.com/setting-up-onboarding-screens-in-react-native

#reactnative #mobileapp #react

Cách Thiết Lập Màn Hình Tích Hợp Trong ứng Dụng React Native

Как настроить бортовые экраны в приложении React Native

Вводные экраны — это очень эффективный способ узнать, как использовать приложение, узнать факты о приложении и некоторые функции приложения, которые можно наглядно продемонстрировать новым пользователям. Это возможно, поскольку это первый экран, с которым пользователь взаимодействует сразу после установки и открытия приложения.

Ожидается , что после первоначального запуска приложения экраны регистрации не появятся. В этом уроке я покажу вам, как настроить бортовые экраны для приложений Android и iOS в React Native .

Полный исходный код этого руководства доступен на Github . Чтобы следовать этому руководству, необходимы базовые знания React Native, и на вашем компьютере должен быть установлен React Native. Также необходимо настроить симулятор Android и iOS для тестирования приложения.

Клонировать простое приложение

Вы должны отправиться на Github и клонировать демонстрационный проект . Это приложение я буду использовать для этого урока. Я настроил React Navigation для навигации по приложению. Для получения дополнительной информации и того, как начать работу с React Navigation, нажмите здесь . Вы также можете посмотреть, как использовать React Navigation в своих проектах, нажав здесь .

После того, как вы клонировали проект, вы должны открыть его в своем редакторе кода, а в терминале вы должны выполнить приведенные ниже команды, которые установят модули узла для проекта и настроят приложение для iOS.

npm install

#Setting up iOS
cd ios && pod install

#Navigate back to the main folder
cd ..

После завершения этого процесса вы должны создать приложение на своих эмуляторах Android и iOS, используя приведенный ниже код.

#Build on Android
npx react-native run-android

#Build on iOS
npx react-native run-ios

Ваше приложение должно отображаться следующим образом:

1 Отображение приложения по умолчанию на Android и iOS

Настройка бортовых экранов

Теперь я перейду к установке библиотеки, которую буду использовать для демонстрации реализации экранов адаптации в вашем проекте React Native.

Конкретная библиотека, которую я буду использовать, — это React Native Onboarding Swiper . Эта библиотека React Native довольно надежна и настраиваема. Чтобы двигаться вперед, вы должны установить библиотеку, используя команду ниже.

npm i react-native-onboarding-swiper
cd ios && pod install

После установки библиотеки важно pod installзапустить ее для загрузки необходимых файлов для правильной работы iOS.

Как только вы установите библиотеку, вы должны создать свои приложения для Android и iOS, используя вышеупомянутую команду. Это также очень важный шаг, который поможет вам избежать ошибок, возникающих из-за того, что ваши приложения не синхронизированы с только что установленной библиотекой.

Когда ваша сборка будет завершена, откройте уже созданную папку экрана и в этой папке откройте OnboardingScreen.js. Здесь будут созданы Onboarding Swipes.

Чтобы создать Onboarding Swipes, у компонента Onboarding должны быть некоторые обязательные свойства. Компонент «страницы» — это массив, который содержит другие необходимые реквизиты, такие как backgroundColor, изображение, заголовок и подзаголовок.

Вы должны создать больше объектов в pagesмассиве, чтобы иметь несколько встроенных свайпов.

Создание ознакомительных свайпов

Первое, что нужно сделать, это создать папку в корневом каталоге проекта, назвать ее assetsтак, как будут расположены изображения, которые будут добавлены на начальный экран, а затем добавить несколько изображений в папку. Затем импортируйте React Native Onboarding Swiper в свой проект, используя приведенный ниже код.

import Onboarding from 'react-native-onboarding-swiper';

Это должно быть добавлено чуть ниже импорта в верхней части страницы. В функции OnboardingScreen удалите представление и верните приведенный ниже код подключения.

<Onboarding
    pages={[
    {
    backgroundColor: '#a6e4d0',
    image: <Image source={require('../assets/list.png')} />,
    title: 'Welcome',
    subtitle: 'Welcome to the first slide of the Onboarding Swiper.',
    },
    ]}
/>

У вас может не отображаться то же изображение, что и у меня, но ваши приложения должны отображаться так на Android и iOS:

2 One Slide Display на Android и iOS

Чтобы добавить больше экранов, вы должны создать больше объектов в массиве. Пример того, что я сделал, таков:

pages={[
    {
        backgroundColor: '#a6e4d0',
        image: <Image source={require('../assets/list.png')} />,
        title: 'Welcome',
        subtitle: 'Welcome to the first slide of the Onboarding Swiper.',
    },
    {
        backgroundColor: '#fdeb93',
        image: <Image source={require('../assets/megaphone.png')} />,
        title: 'Explore',
        subtitle: 'This is the second slide of the Onboarding Swiper.',
    },
    {
        backgroundColor: '#e9bcbe',
        image: <Image source={require('../assets/like.png')} />,
        title: 'All Done',
        subtitle: 'This is the Third slide of the Onboarding Swiper.',
    },

После того, как вы добавите это, ваше приложение должно иметь возможность пролистывать и отображаться следующим образом:

3

Если вы нажмете кнопки «Пропустить» и «Готово», вы обнаружите, что они не будут выполнять никаких действий, и чтобы это исправить, вам нужно захватить реквизиты onSkipи onDone, которые вы будете использовать для перехода пользователя на первую страницу, если они будут нажаты. . Первая страница в этом демонстрационном приложении — Домашняя; следовательно, я буду переходить на домашнюю страницу. Код должен быть добавлен в компонент адаптации.

<Onboarding
//To handle the navigation to the Homepage if Skip is clicked
onSkip={() => navigation.replace("Home")}

//To handle the navigation to the Homepage after Done is clicked
onDone={() => navigation.replace("Home")}
pages={[
    ...
    ]}
/>

Как только это будет добавлено, вы должны попробовать нажать «Пропустить и готово», что приведет вас на домашнюю страницу.

Вы можете дополнительно настроить эти движения, используя реквизиты, указанные здесь. Сейчас я сделаю небольшую настройку, например, использую текст вместо значка для кнопки «Готово». Затем я изменю способ отображения индикаторов смахивания.

Начиная с Готово, вы должны включить TouchableOpacityв качестве импорта из React Native; затем создайте функцию Done, которая будет назначена DoneButtonComponentреквизиту в компоненте Onboarding. См. код ниже:

const Done = ({...props}) => (
    <TouchableOpacity
    {...props}
    >
    <Text style={{fontSize:16, marginHorizontal:20}}>Done</Text>
    </TouchableOpacity>
)

Теперь внутри компонента Onboarding включите приведенный ниже код, чтобы назначить только что созданную функцию Done для файла DoneButtonComponent. Теперь кнопка «Готово» будет отображаться в виде текста, а не значка.

<Onboarding
    ...
    DoneButtonComponent={Done}
    pages=[{
        ...
    ]}
/>

Теперь кнопка «Готово» будет отображаться в виде текста, а не значка. Ваши приложения должны отображаться следующим образом:

4 Кнопка «Готово» заменена на текст вместо значка на Android и iOS

Следующее, что я настрою в этом уроке, — это индикатор экрана загрузки. Для этого я создам еще одну функцию. Эта функция Dot преобразует квадратные индикаторы в прямоугольные индикаторы и делает выбранный слайд синим, а другие стороны черными.

const Dots = ({selected}) => {
    let backgroundColor;
    backgroundColor = selected ? 'blue' : 'black'
    return (
    <View
    style={{
        width:24,
        height:6,
        marginHorizontal:3,
        backgroundColor
    }}
    />
    )
}

Этот код должен отображать ваше приложение следующим образом:

5 точек Swiper, преобразованных в прямоугольники на дисплеях iOS и Android

Создание пользовательского потока

Экран адаптации, который вы только что настроили в соответствии с руководством, всегда будет отображаться первым, как только ваше приложение будет открыто, и это не то, как должен работать экран регистрации.

При создании пользовательского потока вы хотите настроить вводный экран так, чтобы он появлялся только при первой установке вашего приложения, и это то, что я покажу вам сейчас.

Как это будет работать, так это то, что когда пользователь устанавливает или открывает ваше приложение в первый раз, приложение показывает пользователю экран адаптации, и как только пользователь взаимодействует с экранами адаптации, приложение сохраняет строковые данные на устройство. Приложение всегда будет проверять этот код; если код существует, вводный экран отображаться не будет; следовательно, пользователь попадет прямо на домашнюю страницу. Если приложение открывается в первый раз, кода не будет; поэтому будет отображаться экран загрузки.

Чтобы приложение сохраняло строковые данные из приложения, я буду использовать AsyncStorage. Этот пакет помогает хранить файлы и делает их доступными в автономном режиме. Вы можете узнать больше о AsyncStorage здесь .

Вам следует установить React Native AsyncStorage и пересобрать приложение для Android и iOS. Код для этого приведен ниже:

npm i @react-native-async-storage/async-storage
    
cd ios && pod install

После установки пересоберите приложение для Android и iOS с помощью команды, указанной ранее в этой статье.

Как только это будет сделано, откройте файл app.js. В app.js вы должны импортировать AsyncStorage вверху страницы с кодом ниже.

import AsyncStorage from '@react-native-async-storage/async-storage';

Я создам переменную состояния для первого запуска приложения и функцию для обновления firstLaunch с помощью хука React useState . После этого, используя React useEffect Hook , я создам асинхронную функцию, которая будет проверять строковый элемент appLaunched в AsyncStorage при каждом открытии приложения. Если строковый элемент имеет значение null, приложение открывается в первый раз; функция setFirstLaunch обновит firstLaunch до true, и отобразится экран загрузки.

С другой стороны, если строковый элемент appLaunchedнайден в AsyncStorage, функция setFirstLaunch обновит состояние firstLaunch до false, и экран загрузки не будет отображаться; вместо этого пользователь будет направлен прямо на домашнюю страницу. Код ниже.

const App = () => {
  const [firstLaunch, setFirstLaunch] = React.useState(null);
  React.useEffect(() => {
    async function setData() {
      const appData = await AsyncStorage.getItem("appLaunched");
      if (appData == null) {
        setFirstLaunch(true);
        AsyncStorage.setItem("appLaunched", "false");
      } else {
        setFirstLaunch(false);
      }
    }
    setData();
  }, []);
  return ...
};

Обратите внимание, что мне пришлось создать функцию внутри useEffectблока, потому что процесс должен работать асинхронно, следовательно, нужна асинхронная функция. Однако асинхронная функция вызывается непосредственно внутри блока useEffect, чтобы выполнить указанное действие.

Последний процесс, который вы должны сделать, — настроить навигацию приложения для отображения экрана регистрации, если состояние firstLaunch истинно, а если состояние firstLaunch ложно, оно должно направить пользователя на домашнюю страницу. Код ниже.

return (
  firstLaunch != null && (
    <NavigationContainer>
      <Stack.Navigator>
        {firstLaunch && (
          <Stack.Screen
            options={{ headerShown: false }}
            name="Onboarding"
            component={OnboardingScreen}
          />
        )}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
);

После обновления блока возврата до указанного выше, вы должны протестировать приложение. Ваше приложение должно отображать экран подключения, и если вы нажмете кнопки «Пропустить» или «Готово», вы не увидите экран подключения при повторном запуске приложения на Android и iOS.

Вам следует очистить данные приложения в эмуляторе Android и удалить приложение из симулятора iOS, а затем перестроить приложение с помощью npx react-native run-ios и npx react-native run-android. Вы должны увидеть начальные экраны один раз; после этого он больше не должен появляться.

6 Приложение для Android и iOS переходит прямо на домашнюю страницу после первого запуска приложения.

Вывод

Экраны адаптации, которые являются очень эффективным и интересным способом обучения новых пользователей ключевым аспектам использования вашего приложения, не должны оставаться в стороне при разработке. Я смог проиллюстрировать, насколько это возможно и просто реализовать в вашем приложении React Native, и я надеюсь, что то, чем я здесь поделился, поможет вам. Пожалуйста, свяжитесь с нами, если вы столкнетесь с какими-либо проблемами; Я буду очень рад помочь.

Ссылка: https://blog.openreplay.com/setting-up-onboarding-screens-in-react-native

#reactnative #mobileapp #react

Как настроить бортовые экраны в приложении React Native
许 志强

许 志强

1662033960

React Native Zephyr 的初學者指南 | 用於 React Native 的 Tailwind CSS

在本教程中,您將了解什麼是 React Native Zephyr,如何使用 React Native Zephyr,如何使用 React Native Zephyr 中的樣式方法等等

React Native Zephyr是一個受 Tailwind CSS 啟發的樣式庫,旨在提高您的開發速度並更快地發布 React Native 應用程序。

使用純 CSS 構建複雜的 Web 應用程序可能是一項艱鉅的挑戰。因此,開發人員傾向於使用 Bootstrap 和 Tailwind CSS 等流行的樣式庫來縮短開發週期。

與 Web 上的樣式類似,使用 React Native 中的內置樣式功能可能是一個緩慢而費力的過程。有類似 Bootstrap 和 Tailwind CSS 的解決方案可用於 React Native,其中一種解決方案是 React Native Zephyr。React Native Zephyr 是一個受 Tailwind CSS 啟發的樣式庫,旨在提高您的開發速度並更快地發布 React Native 應用程序。

它還為 React Native 帶來了 Tailwind CSS 體驗。如果您熟悉 Tailwind CSS,您可以輕鬆選擇 Zephyr,因為兩者之間有相似之處。本文將向您介紹 React Native Zephyr 的主要功能。

  • 什麼是 React Native Zephyr?
  • 如何使用 React Native Zephyr
  • 如何在 React Native Zephyr 中使用樣式方法
  • React Native Zephyr 中的默認主題
  • 擴展和覆蓋 React Native Zephyr 中的默認主題

什麼是 React Native Zephyr?

React Native Zephyr 是一個受 Tailwind CSS 啟發的 React Native 樣式庫。它在 React Native 的上下文中實現了 Tailwind CSS 的一些核心思想,沒有任何原生依賴。

儘管在撰寫本文時仍處於積極開發階段,但以下是 React Native Zephyr 的一些關鍵特性。

  • 它提供了一套方便的開箱即用的內置樣式實用程序
  • 它帶有可擴展的默認主題
  • 它支持開箱即用的暗模式

上述特性使 React Native Zephyr 成為其他庫中內置樣式功能的更好替代品。上面的功能絕不是詳盡的,我建議查看官方文檔以了解更多 React Native Zephyr 的內置功能。

React Native 具有與 Web 不直接兼容的樣式功能。因此,將您的以 Web 為中心的樣式解決方案(如 Bootstrap 和 Tailwind CSS)直接轉移到 React Native 可能很困難。但是,由於兩個庫之間的相似性,您的一些 Tailwind CSS 技能集可以轉移到 React Native Zephyr。

如果你有一個現有的 React Native 項目,你可以像這樣從 npm 包註冊表安裝 React Native Zephyr:

# Using npm
npm i react-native-zephyr

# Using yarn
yarn add react-native-zephyr

# Using pnpm
pnpm add react-native-zephyr

如何使用 React Native Zephyr

React Native Zephyr 在後台使用StyleProvider組件來管理應用程序的配色方案等。要開始使用react-native-zephyr,請導入StyleProvider組件並將您的應用程序包裝在其中。

import { StyleProvider } from "react-native-zephyr";
export const App = () => (
  <StyleProvider>
    { /* The rest of your app goes here */}
  </StyleProvider>
);

React Native Zephyr 導出了createStyleBuilder用於生成核心樣式實用程序的功能。調用createStyleBuilder將返回stylesuseStylesmakeStyledComponent實用程序函數。這些樣式實用程序函數提供了 React Native Zephyr 的不同樣式方法。

為了便於維護,React Native Zephyr 建議創建一個專用的實用程序文件來管理您的樣式實用程序。下面的代碼顯示了 React Native Zephyr 的基本樣式實用程序文件。

import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

createStyleBuilder函數還接受一個可選參數,儘管我們在上面的示例中沒有傳遞它,您可以使用它來覆蓋或擴展默認主題。如果您createStyleBuilder像我們所做的那樣不帶參數調用,React Native Zephyr 將使用默認主題。我們將在接下來的部分中學習覆蓋和擴展默認主題。

您可以將此實用程序文件中的所需內容導出到應用程序的其他組件。如上例所示,核心樣式實用程序是stylesandmakeStyledComponent函數和useStyles鉤子。

如何在 React Native Zephyr 中使用樣式方法

如上一節所述,React Native Zephyr 建議創建一個專用的styles.js實用程序文件來管理其實用程序功能。調用該createStyleBuilder函數返回stylesandmakeStyledComponent函數和useStyles鉤子。您可以將這些實用程序函數從styles.js文件中導出到應用程序中需要它們的組件中。

import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

styles函數接受一個 React Native Zephyr 類名數組並返回一個 React Native 樣式對象。您作為參數傳遞的類名來自您的主題和處理程序。您可以styles像這樣使用該功能:

export default function App() {
  return (
    <View style={styles("flex:1", "bg:black")} >
      <Text style={styles("color:white", "text:5xl")}>
        Hello World
      </Text>
    </View>
  );
}

請注意,該styles功能沒有對暗模式的開箱即用支持。因此,它只適合一次性的樣式。

您還可以使用makeStyledComponentReact Native Zephyr 中的包裝器進行樣式設置。顧名思義,makeStyledComponent是一個用於製作樣式化組件的實用函數。實用程序函數將makeStyledComponent組件作為參數,並向組件添加classdarkClass道具。它返回包裝的組件,您可以將樣式類傳遞給該組件。

如上所述,最好在styles.js文件中創建樣式組件並像這樣導出它們:

export const StyledText = makeStyledComponent(Text);
export const StyledView = makeStyledComponent(View);

useStyles鉤子內部使用該方法styles。與該styles方法不同,該useStyles鉤子支持暗模式。與任何其他 React 鉤子一樣,您只能將useStyles鉤子與功能組件和另一個鉤子一起使用——它返回一個樣式對象,您可以將其傳遞給 React Native 元素。

下面的代碼演示瞭如何使用useStyles鉤子。

export default function App() {
  const wrapperStyles = useStyles({
    classes: ["flex:1", "bg:black"],
  });
  const textStyles = useStyles({
    classes: ["color:white", "text:5xl"],
  });
  return (
    <View style={wrapperStyles}>
      <Text style={textStyles}>Hello World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

React Native Zephyr 中的默認主題

React Native Zephyr 有一個默認主題,無需配置即可使用——我們從一開始就一直在使用它。默認主題從 Tailwind CSS 中的默認主題中汲取靈感;如果默認主題不符合您的需要,您也可以擴展它。

默認主題帶有幾個樣式約束;React Native Zephyr 使用它來生成樣式類。

當您將pl:56樣式應用於以下示例中的元素時,React Native Zephyr 將添加224px. 在pl:56樣式類中,plpaddingLeft屬性,56是默認主題間距約束,其大小是224pxReact Native Zephyr 將樣式轉換為 React Native 樣式對象時的大小。該文檔包含默認主題約束及其相應比例的完整列表。

<StyledText classes={["pl:56"]}>Hello World</StyledText>

React Native Zephyr 使用spacing約束來生成邊距、填充和大小調整樣式類。默認主題包括其他幾個約束,如opacitiesletterSpacing約束。

擴展和覆蓋 React Native Zephyr 中的默認主題

儘管它帶有默認主題,但 React Native Zephyr 允許您擴展和覆蓋它。前幾節中介紹的createStyleBuilder函數將可選對像作為參數。該對象具有overrideThemeextendTheme屬性,分別用於覆蓋和擴展默認主題。這兩個屬性的值可以是對像或函數。

如果您將overrideTheme屬性的值設置為如下示例所示的對象,React Native Zephyr 將覆蓋默認主題中的顏色。顏色darklightbrandColorPalette將覆蓋下面示例中的默認顏色。

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
 overrideTheme: {
  colors: {
    dark: "#737373",
    light: "#e5e5e5",
    brandColorPalette: "#a1323e",
  }
 }
});

您可以將overrideTheme屬性的值設置為返回主題約束對象的函數,如下面的代碼所示。當您將屬性的值設置為函數時,您將可以訪問基本字體大小overrideTheme

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 18,
  overrideTheme: ({ baseFontSize }) => {
    return {
      colors: {
        dark: "#737373",
        light: "#e5e5e5",
        brandColorPalette: "#a1323e",
      },
      spacing: {
        enormous: baseFontSize * 100,
      },
    };
  },
});

在上面的示例中,React Native Zephyr 將使用您在自定義主題中提供的顏色和間距覆蓋默認主題中的顏色和間距。

你可以extendTheme類似地使用。與overrideTheme屬性不同的是,extendTheme屬性擴展了默認主題而不是覆蓋它。

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  extendTheme: {
    colors: {
      brandColorPalette: "#a1323e",
    },
  },
});

如果要訪問基本字體大小,還可以將extendTheme屬性的值設置為返回對象的函數,如下所示:

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 12,
  extendTheme: ({ baseFontSize }) => {
    return {
      spacing: {
        enormous: baseFontSize * 100,
      },
      colors: {
        brandColorPalette: "#a1323e",
      },
    };
  },
});

結論

Bootstrap 和 Tailwind CSS 等樣式解決方案很受歡迎,因為它們提高了開發速度。React Native Zephyr 正在嘗試將 Tailwind CSS 體驗帶入 React Native,如果您已經熟悉 Tailwind CSS,那麼很容易上手。

React Native Zephyr 配備了一個默認主題,提供了一組豐富的值來讓你失望。如果默認主題不能滿足您的需求,您可以按照文章中的說明擴展或覆蓋它。雖然在寫這篇文章的時候還很年輕,但還是值得探索一下 React Native Zephyr 看看它是否適合你——希望你會發現它對你的項目有用。

React Native Zephyr 有幾個特性我們沒有在本文中介紹。請查看官方文檔以了解更多功能。在下面的評論部分讓我知道您的想法。

文章原文來源https://blog.logrocket.com

#reactnative #tailwindcss 

React Native Zephyr 的初學者指南 | 用於 React Native 的 Tailwind CSS
Romolo  Morelli

Romolo Morelli

1662019620

Una guida per principianti a React Native Zephyr

In questo tutorial imparerai cos'è React Native Zephyr, come usare React Native Zephyr, come usare i metodi di styling in React Native Zephyr e altro ancora

React Native Zephyr è una libreria di stili ispirata ai CSS di Tailwind progettata per aumentare la velocità di sviluppo e spedire le app React Native più velocemente.

La creazione di app Web complesse con semplici CSS può essere una sfida scoraggiante. Di conseguenza, gli sviluppatori tendono a utilizzare librerie di stili popolari come Bootstrap e Tailwind CSS per migliorare i cicli di sviluppo.

Simile allo styling sul Web, l'utilizzo delle funzionalità di styling integrate in React Native può essere un processo lento e laborioso. Esistono soluzioni simili a Bootstrap e Tailwind CSS disponibili per React Native e una di queste soluzioni è React Native Zephyr. React Native Zephyr è una libreria di stili ispirata ai CSS di Tailwind progettata per migliorare la velocità di sviluppo e spedire le applicazioni React Native più velocemente.

Porta anche l'esperienza CSS di Tailwind in React Native. Se hai familiarità con Tailwind CSS, puoi facilmente prendere Zephyr a causa delle somiglianze tra i due. Questo articolo ti introdurrà alle caratteristiche principali di React Native Zephyr.

  • Cos'è React Native Zephyr?
  • Come usare React Native Zephyr
  • Come utilizzare i metodi di styling in React Native Zephyr
  • Il tema predefinito in React Native Zephyr
  • Estendi e sovrascrivi il tema predefinito in React Native Zephyr

Cos'è React Native Zephyr?

React Native Zephyr è una libreria di stili React Native ispirata a Tailwind CSS. Implementa alcune delle idee fondamentali di Tailwind CSS nel contesto di React Native senza alcuna dipendenza nativa.

Sebbene sia ancora in fase di sviluppo attivo al momento della stesura di questo articolo, le seguenti sono alcune delle caratteristiche chiave di React Native Zephyr.

  • Fornisce un pratico set di utilità per lo styling integrate pronte all'uso
  • Viene fornito con un tema predefinito estensibile
  • Ha il supporto per la modalità oscura pronta all'uso

Le funzionalità di cui sopra rendono React Native Zephyr un'alternativa migliore alla funzionalità di stile integrata che si trova in altre librerie. Le funzionalità di cui sopra non sono affatto esaustive e consiglierei di consultare la documentazione ufficiale per ulteriori funzionalità integrate di React Native Zephyr.

React Native ha funzionalità di styling che non sono direttamente compatibili con il web. Pertanto, potrebbe essere difficile trasferire direttamente le tue soluzioni di stile incentrate sul Web come Bootstrap e Tailwind CSS a React Native. Tuttavia, alcuni dei tuoi set di abilità CSS di Tailwind sono trasferibili a React Native Zephyr a causa delle somiglianze tra le due librerie.

Se hai un progetto React Native esistente, puoi installare React Native Zephyr dal registro dei pacchetti npm in questo modo:

# Using npm
npm i react-native-zephyr

# Using yarn
yarn add react-native-zephyr

# Using pnpm
pnpm add react-native-zephyr

Come usare React Native Zephyr

React Native Zephyr utilizza il StyleProvidercomponente nascosto per gestire, tra le altre cose, la combinazione di colori dell'applicazione. Per iniziare a utilizzare react-native-zephyr, importa il StyleProvidercomponente e avvolgi la tua app al suo interno.

import { StyleProvider } from "react-native-zephyr";
export const App = () => (
  <StyleProvider>
    { /* The rest of your app goes here */}
  </StyleProvider>
);

React Native Zephyr esporta la createStyleBuilderfunzione per la generazione di utilità di styling di base. Il richiamo createStyleBuilderrestituirà le funzioni di utilità styles, useStyles, e . makeStyledComponentQueste funzioni di utilità di styling forniscono i diversi approcci di styling di React Native Zephyr.

Per una facile manutenzione, React Native Zephyr consiglia di creare un file di utilità dedicato per la gestione delle utilità di styling. Il codice seguente mostra il file di utilità per lo styling di base di React Native Zephyr.

import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

La createStyleBuilderfunzione accetta anche un argomento facoltativo, sebbene non l'abbiamo passato nell'esempio sopra, che puoi usare per sovrascrivere o estendere il tema predefinito. Se invochi createStyleBuildersenza un argomento, come abbiamo fatto noi, React Native Zephyr utilizzerà il tema predefinito. Impareremo a sovrascrivere ed estendere il tema predefinito nelle prossime sezioni.

Puoi esportare ciò che ti serve da questo file di utilità agli altri componenti della tua app. Come mostra l'esempio sopra, le utilità di styling principali sono le funzioni e e l' styleshook .makeStyledComponentuseStyles

Come utilizzare i metodi di styling in React Native Zephyr

Come notato nella sezione precedente, React Native Zephyr consiglia di creare un styles.jsfile di utilità dedicato per la gestione delle sue funzioni di utilità. Invocare la createStyleBuilderfunzione restituisce le funzioni stylese makeStyledComponente l' useStyleshook. Puoi esportare queste funzioni di utilità dal styles.jsfile ai componenti che ne hanno bisogno nella tua app.

import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

La stylesfunzione prende un array di nomi di classi React Native Zephyr e restituisce un oggetto di stili React Native. I nomi delle classi che passi come argomenti provengono dal tuo tema e dai gestori. Puoi usare la stylesfunzione in questo modo:

export default function App() {
  return (
    <View style={styles("flex:1", "bg:black")} >
      <Text style={styles("color:white", "text:5xl")}>
        Hello World
      </Text>
    </View>
  );
}

Tieni presente che la stylesfunzione non ha il supporto pronto all'uso per la modalità oscura. Pertanto, è adatto solo per uno stile unico.

Puoi anche modellare usando il makeStyledComponentwrapper in React Native Zephyr. Come suggerisce il nome, makeStyledComponentè una funzione di utilità per creare componenti in stile. La makeStyledComponentfunzione di utilità prende un Component come argomento e aggiunge classe darkClasspropone al Component. Restituisce il componente avvolto a cui puoi passare le classi di stile.

Come suggerito sopra, è meglio creare componenti con uno stile nel tuo styles.jsfile ed esportarli in questo modo:

export const StyledText = makeStyledComponent(Text);
export const StyledView = makeStyledComponent(View);

L' useStyleshook utilizza internamente il stylesmetodo. A differenza del stylesmetodo, l' useStyleshook ha il supporto per la modalità oscura. Come qualsiasi altro hook React, puoi usare l' useStyleshook solo con componenti funzionali e un altro hook: restituisce un oggetto di stile che puoi passare a un elemento React Native.

Il codice seguente mostra come utilizzare l' useStyleshook.

export default function App() {
  const wrapperStyles = useStyles({
    classes: ["flex:1", "bg:black"],
  });
  const textStyles = useStyles({
    classes: ["color:white", "text:5xl"],
  });
  return (
    <View style={wrapperStyles}>
      <Text style={textStyles}>Hello World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Il tema predefinito in React Native Zephyr

React Native Zephyr ha un tema predefinito che puoi utilizzare senza configurazione: lo usiamo dall'inizio. Il tema predefinito trae ispirazione dal tema predefinito in Tailwind CSS; puoi anche estendere il tema predefinito se non soddisfa le tue esigenze.

Il tema predefinito viene fornito con diversi vincoli di stile; che React Native Zephyr usa per generare classi di styling.

Quando applichi lo pl:56stile a un elemento come nell'esempio seguente, React Native Zephyr aggiungerà il riempimento sinistro di 224px. Nella pl:56classe style, plè la paddingLeftproprietà, ed 56è un vincolo di spaziatura del tema predefinito la cui dimensione è 224pxquando React Native Zephyr trasforma lo stile in un oggetto di stile React Native. La documentazione contiene un elenco completo dei vincoli tematici predefiniti e delle scale corrispondenti.

<StyledText classes={["pl:56"]}>Hello World</StyledText>

React Native Zephyr utilizza i spacingvincoli per generare classi di stile di margine, riempimento e ridimensionamento. Il tema predefinito include molti altri vincoli come opacitiese letterSpacingvincoli.

Estendi e sovrascrivi il tema predefinito in React Native Zephyr

Sebbene venga fornito con un tema predefinito, React Native Zephyr ti consente di estenderlo e sovrascriverlo. La createStyleBuilderfunzione introdotta in una delle sezioni precedenti accetta un oggetto opzionale come argomento. L'oggetto ha le proprietà overrideThemee extendThemerispettivamente per sovrascrivere ed estendere il tema predefinito. Il valore di entrambe le proprietà può essere oggetti o funzioni.

Se imposti il ​​valore della overrideThemeproprietà su un oggetto come nell'esempio seguente, React Native Zephyr sovrascriverà i colori nel tema predefinito. I colori dark, lighte brandColorPalettesostituiranno i colori predefiniti nell'esempio seguente.

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
 overrideTheme: {
  colors: {
    dark: "#737373",
    light: "#e5e5e5",
    brandColorPalette: "#a1323e",
  }
 }
});

È possibile impostare il valore della overrideThemeproprietà su una funzione che restituisce l'oggetto vincoli del tema come nel codice seguente. Avrai accesso alla dimensione del carattere di base quando imposti il ​​valore della overrideThemeproprietà su una funzione.

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 18,
  overrideTheme: ({ baseFontSize }) => {
    return {
      colors: {
        dark: "#737373",
        light: "#e5e5e5",
        brandColorPalette: "#a1323e",
      },
      spacing: {
        enormous: baseFontSize * 100,
      },
    };
  },
});

Nell'esempio sopra, React Native Zephyr sovrascriverà i colori e la spaziatura nel tema predefinito con quello che hai fornito nel tema personalizzato.

Puoi usare extendThemeallo stesso modo. A differenza della overrideThemeproprietà, la extendThemeproprietà estende il tema predefinito invece di sovrascriverlo.

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  extendTheme: {
    colors: {
      brandColorPalette: "#a1323e",
    },
  },
});

Se vuoi accedere alla dimensione del carattere di base, puoi anche impostare il valore della extendThemeproprietà su una funzione che restituisce un oggetto in questo modo:

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 12,
  extendTheme: ({ baseFontSize }) => {
    return {
      spacing: {
        enormous: baseFontSize * 100,
      },
      colors: {
        brandColorPalette: "#a1323e",
      },
    };
  },
});

Conclusione

Le soluzioni di styling come Bootstrap e Tailwind CSS sono popolari perché aumentano la velocità di sviluppo. React Native Zephyr sta tentando di portare l'esperienza CSS di Tailwind in React Native e raccoglierla è facile se hai già familiarità con Tailwind CSS.

React Native Zephyr viene fornito con un tema predefinito che offre una generosa serie di valori per farti partire. Se il tema predefinito non soddisfa le tue esigenze, puoi estenderlo o sostituirlo come descritto nell'articolo. Sebbene sia giovane al momento della stesura di questo articolo, vale la pena esplorare React Native Zephyr per vedere se funziona per te, si spera che lo troverai utile per il tuo progetto.

Ci sono diverse funzionalità di React Native Zephyr che non abbiamo trattato in questo articolo. Consulta la documentazione ufficiale per ulteriori funzionalità. Fatemi sapere cosa ne pensate nella sezione commenti qui sotto.

Fonte dell'articolo originale su https://blog.logrocket.com

#reactnative #tailwindcss

Una guida per principianti a React Native Zephyr