React Native cross-platform development practice: from zero to one-JS Tutorial-php.cn

React Native cross-platform development practice: from zero to one

Mary-Kate Olsen

Release： 2024-12-24 16:39:13

Original

219 people have browsed it

React Native cross-platform development practice: from zero to one

I'm learning React Native cross-platform development recently, how to develop the first basic application from scratch and package it for release:

1. Environment preparation

Install Node.js
Install React Native CLI
Set up Android or iOS development environment (depending on the platform you want to support)

2. Create a new project Use React Native CLI to create a new project:

npx react-native init MyProject

Copy after login

3. Check the project structure The new project will contain the following key files and directories:

index.js: the entry point of the application
App.js: the main components of the application
android and ios directories: contain project configurations for Android and iOS platforms respectively
package.json: project dependencies and metadata

4. Run the application

For Android:

npx react-native run-android

Copy after login

For iOS:

npx react-native run-ios

Copy after login

5. Write your first component

Open App.js, replace the default content, and create a simple Hello World component:

   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

Copy after login

8. Use third-party libraries to update App.js to import icons:

   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

Copy after login

Then create the navigation structure:

    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;

Copy after login

Create HomeScreen.js and DetailsScreen.js in the screens directory and write the corresponding components.

11. Network request Use the axios library to make HTTP requests:

    npm install axios

Copy after login

Sending a request in a component:

    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;

Copy after login

12. State management

Use Redux or MobX for state management. Here we take Redux as an example:

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

Copy after login

Create a store, actions, and reducers, then set the Provider in 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;

Copy after login

13. Animation Use the react-native-reanimated library to implement animation:

    npm install react-native-reanimated

Copy after login

Add animation effects to components:

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

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

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

      const animatedStyle = {
        opacity,
      };

      return (
        <Animated.View>



<h3>
  
  
  14. Performance optimization
</h3>

Copy after login

Use PureComponent or React.memo to reduce unnecessary rendering
Use FlatList or SectionList to optimize long lists
Use shouldComponentUpdate or useMemo, useCallback lifecycle methods
Optimize network requests and image loading
Use AsyncStorage or redux-persist to save state when appropriate

15. Release the app

Android: Generate a signed APK and upload it to Google Play Console
iOS: Configure Xcode and submit it to App Store Connect

The above is the detailed content of React Native cross-platform development practice: from zero to one. For more information, please follow other related articles on the PHP Chinese website!