Amalan pembangunan merentas platform React Native: dari sifar kepada satu

Saya sedang mempelajari pembangunan merentas platform React Native baru-baru ini, cara membangunkan aplikasi asas pertama dari awal dan membungkusnya untuk dikeluarkan:

1. Persediaan persekitaran

• Pasang Node.js
• Pasang React Native CLI
• Sediakan persekitaran pembangunan Android atau iOS (bergantung pada platform yang anda mahu sokong)

2. Buat projek baharu Gunakan React Native CLI untuk mencipta projek baharu:

npx react-native init MyProject

3. Semak struktur projek Projek baharu akan mengandungi fail dan direktori utama berikut:

• index.js: titik masuk aplikasi
• App.js: komponen utama aplikasi
• direktori android dan ios: masing-masing mengandungi konfigurasi projek untuk platform Android dan iOS
• package.json: kebergantungan projek dan metadata

4. Jalankan aplikasi

Untuk Android:

npx react-native run-android

Untuk iOS:

npx react-native run-ios

5. Tulis komponen pertama anda

Buka App.js, gantikan kandungan lalai dan buat komponen Hello World yang mudah:

   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. Gunakan perpustakaan pihak ketiga untuk mengemas kini App.js untuk mengimport ikon:

   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

Kemudian buat struktur navigasi:

    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;

Buat HomeScreen.js dan DetailsScreen.js dalam direktori skrin dan tulis komponen yang sepadan.

11. Permintaan rangkaian Gunakan perpustakaan axios untuk membuat permintaan HTTP:

    npm install axios

Menghantar permintaan dalam komponen:

    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. Pengurusan negeri

Gunakan Redux atau MobX untuk pengurusan negeri. Di sini kita mengambil Redux sebagai contoh:

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

Buat kedai, tindakan dan pengurang, kemudian tetapkan Pembekal dalam 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. Animasi Gunakan perpustakaan react-native-reanimasi untuk melaksanakan animasi:

    npm install react-native-reanimated

Tambahkan kesan animasi pada komponen:

 import React daripada 'react';
    import { Animated, View, Text } daripada 'react-native';
    import { interpolate } daripada 'react-native-reanimate';

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

      kelegapan const = interpolate(animatedValue, {
        julat input: [0, 1],
        Julat keluaran: [0, 1],
      });

      const animatedStyle = {
        kelegapan,
      };

      kembali (
        <Animated.View>



<h3>
  
  
  14. Pengoptimuman prestasi
</h3>

• Gunakan PureComponent atau React.memo untuk mengurangkan pemaparan yang tidak perlu
• Gunakan FlatList atau SectionList untuk mengoptimumkan senarai panjang
• Gunakan shouldComponentUpdate atau gunakanMemo, gunakan kaedah kitaran hayatCallback
• Optimumkan permintaan rangkaian dan pemuatan imej
• Gunakan AsyncStorage atau redux-persist untuk menyimpan keadaan apabila sesuai

15. Lepaskan apl

• Android: Jana APK yang ditandatangani dan muat naik ke Google Play Console
• iOS: Konfigurasikan Xcode dan serahkannya ke App Store Connect

Atas ialah kandungan terperinci Amalan pembangunan merentas platform React Native: dari sifar kepada satu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!