Recently, I am learning React Native cross-platform development. 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 an Android or iOS development environment (depending on which 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 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 a third-party library to update the App.js import icon:
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. After executing and testing each modification, re-execute the application to see the changes.
10. Added routing and navigation
In order to jump between pages in the application, we can use the react-navigation library. First time installation:
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 build 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 exist screens directory and write the corresponding components.
11. Network requests use the axios library to make HTTP requests:
npm install axios
Send the request in the 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. Status 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 the store, actions and reducers, and 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 uses 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
- Optimize long lists using FlatList or SectionList
- Use shouldComponentUpdate or useMemo, useCallback life cycle methods
- Optimize network requests and image loading
- Use AsyncStorage or redux-persist to store state when appropriate
15. Publish the application
- Android: Generate a signed APK and upload it to Google Play Console
- iOS: Configure Xcode and submit to App Store Connect