Pratique de développement multiplateforme React Native : de zéro à un

J'apprends récemment le développement multiplateforme React Native, comment développer la première application de base à partir de zéro et la conditionner pour la sortie :

1. Préparation de l'environnement

• Installer Node.js
• Installer React Native CLI
• Configurez un environnement de développement Android ou iOS (selon la plateforme que vous souhaitez prendre en charge)

2. Créez un nouveau projet Utilisez React Native CLI pour créer un nouveau projet :

npx react-native init MyProject

3. Vérifiez la structure du projet Le nouveau projet contiendra les fichiers et répertoires clés suivants :

• index.js : le point d'entrée de l'application
• App.js : les principaux composants de l'application
• Répertoires Android et iOS : contiennent respectivement les configurations de projet pour les plateformes Android et iOS
• package.json : dépendances et métadonnées du projet

4. Exécutez l'application

Pour Android :

npx react-native run-android

Pour iOS :

npx react-native run-ios

5. Écrivez votre premier composant

Ouvrez App.js, remplacez le contenu par défaut et créez un simple composant Hello World :

   import React from 'react';
   import { View, Text } from 'react-native';

   const App = () => {
     return (
       <View>



<h3>
  
  
  6. Add styles You can add CSS styles in App.js or in a separate styles.js file:
</h3>



<pre class="brush:php;toolbar:false">   import React from 'react';
   import { View, Text, StyleSheet } from 'react-native';

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#F5FCFF',
     },
   });

   const App = () => {
     return (
       <View>



<h3>
  
  
  7. Install third-party libraries
</h3>

<p>Suppose we want to use the react-native-vector-icons library to add icons:<br>
</p>

<pre class="brush:php;toolbar:false">   npm install react-native-vector-icons
   npx react-native link react-native-vector-icons

8. Utilisez des bibliothèques tierces pour mettre à jour App.js afin d'importer des icônes :

   import React from 'react';
   import { View, Text } from 'react-native';
   import Icon from 'react-native-vector-icons/Ionicons';

   const App = () => {
     return (
       <View>



<h3>
  
  
  9. Run and test After each modification, rerun the application to see the changes.
</h3>

<h3>
  
  
  10. Add routing and navigation
</h3>

<p>In order to jump between pages in the application, we can use the react-navigation library. First install:<br>
</p>

<pre class="brush:php;toolbar:false">    npm install @react-navigation/native
    npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Créez ensuite la structure de navigation :

    import React from 'react';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';
    import HomeScreen from './screens/HomeScreen';
    import DetailsScreen from './screens/DetailsScreen';

    const Stack = createStackNavigator();

    const App = () => {
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    };

    export default App;

Créez HomeScreen.js et DetailsScreen.js dans le répertoire screens et écrivez les composants correspondants.

11. Requête réseau Utilisez la bibliothèque axios pour effectuer des requêtes HTTP :

    npm install axios

Envoi d'une requête dans un composant :

    import React, { useState, useEffect } from 'react';
    import axios from 'axios';

    const HomeScreen = () => {
      const [data, setData] = useState([]);

      useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/posts')
          .then(response => setData(response.data))
          .catch(error => console.error(error));
      }, []);

      return (
        // 渲染数据
      );
    };

    export default HomeScreen;

12. Gestion de l'État

Utilisez Redux ou MobX pour la gestion de l'état. Ici, nous prenons Redux comme exemple :

    npm install redux react-redux
    npm install @reduxjs/toolkit

Créez un magasin, des actions et des réducteurs, puis définissez le fournisseur dans App.js :

    import React from 'react';
    import { Provider } from 'react-redux';
    import store from './store';

    const App = () => {
      return (
        <Provider store={store}>
          {/* Other codes */}
        </Provider>
      );
    };

    export default App;

13. Animation Utilisez la bibliothèque React-Native-Reanimated pour implémenter l'animation :

    npm install react-native-reanimated

Ajouter des effets d'animation aux composants :

 importer React depuis 'react';
    importer {Animation, Vue, Texte} depuis 'react-native' ;
    importer { interpoler } depuis 'react-native-reanimated' ;

    const App = () => {
      const animationValue = new Animated.Value(0);

      const opacité = interpoler (animatedValue, {
        plage d'entrée : [0, 1],
        plage de sortie : [0, 1],
      });

      const styleanimé = {
        opacité,
      } ;

      retour (
        <Vue animée>



<h3>
  
  
  14. Optimisation des performances
</h3>

• Utilisez PureComponent ou React.memo pour réduire les rendus inutiles
• Utilisez FlatList ou SectionList pour optimiser les longues listes
• Utilisez ShouldComponentUpdate ou useMemo, utilisez les méthodes de cycle de vie UseCallback
• Optimiser les requêtes réseau et le chargement des images
• Utilisez AsyncStorage ou redux-persist pour enregistrer l'état le cas échéant

15. Libérez l'application

• Android : générez un APK signé et téléchargez-le sur la console Google Play
• iOS : configurez Xcode et soumettez-le à App Store Connect

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!