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