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

Published at

12/23/2024

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

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

For iOS:

npx react-native run-ios

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 style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>Hello, React Native!</Text>
       </View>
     );
   };

   export default App;

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

   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 style={styles.container}>
         <Text style={{ fontSize: 20, color: 'blue' }}>Hello, React Native!</Text>
       </View>
     );
   };

   export default App;

7. Install third-party libraries

Suppose we want to use the react-native-vector-icons library to add icons:

   npm install react-native-vector-icons
   npx react-native link react-native-vector-icons

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 style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Icon name="md-heart" size={32} color="#900" />
         <Text style={{ fontSize: 20, color: 'blue' }}>Hello, React Native!</Text>
       </View>
     );
   };

   export default App;

9. Run and test After each modification, rerun the application to see the changes.

10. Add routing and navigation

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

    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

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;

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

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;

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

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;

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

    npm install react-native-reanimated

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 style={[animatedStyle]}>
          <Text>Hello, React Native!</Text>
        </Animated.View>
      );
    };

    export default App;

14. Performance optimization

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

dev-resources.site