# 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:

```sh
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:**

```sh
npx react-native run-android
```

**For iOS:**

```sh
npx react-native run-ios
```

### 5\. Write your first component

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

```jsx
   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:

```jsx
   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:

```sh
   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:

```jsx
   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:

```sh
    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:

```jsx
    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:

```sh
    npm install axios
```

**Sending a request in a component:**

```jsx
    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:

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

Create a store, actions, and reducers, then set the Provider in App.js:

```jsx
    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:

```sh
    npm install react-native-reanimated
```

**Add animation effects to components:**

```jsx
    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