React Native plattformübergreifende Entwicklungspraxis: von Null auf Eins

Ich lerne kürzlich die plattformübergreifende Entwicklung von React Native, wie man die erste Basisanwendung von Grund auf entwickelt und für die Veröffentlichung verpackt:

1. Vorbereitung der Umgebung

• Node.js installieren
• React Native CLI installieren
• Richten Sie eine Android- oder iOS-Entwicklungsumgebung ein (abhängig von der Plattform, die Sie unterstützen möchten)

2. Erstellen Sie ein neues Projekt. Verwenden Sie React Native CLI, um ein neues Projekt zu erstellen:

npx react-native init MyProject

3. Überprüfen Sie die Projektstruktur. Das neue Projekt enthält die folgenden Schlüsseldateien und Verzeichnisse:

• index.js: der Einstiegspunkt der Anwendung
• App.js: die Hauptkomponenten der Anwendung
• Android- und iOS-Verzeichnisse: enthalten Projektkonfigurationen für Android- bzw. iOS-Plattformen
• package.json: Projektabhängigkeiten und Metadaten

4. Führen Sie die Anwendung aus

Für Android:

npx react-native run-android

Für iOS:

npx react-native run-ios

5. Schreiben Sie Ihre erste Komponente

Öffnen Sie App.js, ersetzen Sie den Standardinhalt und erstellen Sie eine einfache Hello World-Komponente:

   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. Verwenden Sie Bibliotheken von Drittanbietern, um App.js zu aktualisieren und Symbole zu importieren:

   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

Dann erstellen Sie die Navigationsstruktur:

    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;

Erstellen Sie HomeScreen.js und DetailsScreen.js im Bildschirmverzeichnis und schreiben Sie die entsprechenden Komponenten.

11. Netzwerkanfrage Verwenden Sie die Axios-Bibliothek, um HTTP-Anfragen zu stellen:

    npm install axios

Senden einer Anfrage in einer Komponente:

    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. Staatsverwaltung

Verwenden Sie Redux oder MobX für die Zustandsverwaltung. Hier nehmen wir Redux als Beispiel:

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

Erstellen Sie einen Store, Aktionen und Reduzierer und legen Sie dann den Anbieter in App.js fest:

    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 Verwenden Sie die React-Native-Reanimated-Bibliothek, um Animationen zu implementieren:

    npm install react-native-reanimated

Animationseffekte zu Komponenten hinzufügen:

 import React from 'react';
    import { Animated, View, Text } from 'react-native';
    import { interpolate } aus 'react-native-reanimated';

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

      const opacity = interpolate(animatedValue, {
        Eingabebereich: [0, 1],
        Ausgabebereich: [0, 1],
      });

      constanimatedStyle = {
        Opazität,
      };

      zurückkehren (
        <Animierte.Ansicht>



<h3>
  
  
  14. Leistungsoptimierung
</h3>

• Verwenden Sie PureComponent oder React.memo, um unnötiges Rendering zu reduzieren
• Verwenden Sie FlatList oder SectionList, um lange Listen zu optimieren
• Verwenden Sie die Lebenszyklusmethoden „shouldComponentUpdate“ oder „useMemo“ und „useCallback“
• Netzwerkanfragen und Bildladen optimieren
• Verwenden Sie AsyncStorage oder redux-persist, um den Status bei Bedarf zu speichern

15. Geben Sie die App frei

• Android: Generieren Sie ein signiertes APK und laden Sie es in die Google Play Console hoch
• iOS: Xcode konfigurieren und an App Store Connect senden

Das obige ist der detaillierte Inhalt vonReact Native plattformübergreifende Entwicklungspraxis: von Null auf Eins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!