1. Selection of Rn scaffolding
In the first two chapters, we explored some basic theoretical architecture knowledge of rn, so now let us get to the point.
There are currently two mainstream scaffoldings: React Native CLI and Expo Cli
React Native CLI was created by Facebook. This scaffolding has three parts: native iOS and Android, and JavaScript. To use this you need to download Xcode and Android Studio. One of its main advantages is its flexibility. We can download dependencies or write some code on the native module. However, it actually has some requirements on our native development capabilities.
Expo Cli is actually part of an overall (Expo) architecture. expo is actually a react app framework and platform. It integrates packaging, publishing, and testing. Of course, the most important thing is that it has lower requirements for native capabilities. We usually only use js to develop and iterate quickly.
So what parts does the Expo framework include?
* Expo CLI: A command line tool that can create project templates, then run, build and update them.
* Expo Go: An Android and iOS application that can run your projects directly on the device (without compilation and signing) and share your project development with the entire team.
* Expo Snack: playground on the browser, just play some small functions online.
* Expo App Services(ESA): Expo’s cloud service.
Expo has a lot of functionality out of the box, but it also imposes limitations on the project. We cannot manually connect custom libraries to native, we usually just use the libraries provided by Expo cli directly. In fact, this is for version compatibility and lowering the threshold (I just don’t want to adjust the native version), Expo is forced to help us save this time.
To put it simply, it is more friendly to students without native abilities.
2. Actual combat
2.1. Simply run the project
First download the scaffolding npm install -g expo-cli
Then in your directory, run expo init projectName and select the first one.
The command line must be connected to and from the Internet scientifically, otherwise the project download will be very slow.
Then we can start working on our project.
yarn start
Then it’s Expo Go’s turn, which is a mobile app that can be downloaded directly on both Android and ios.
Let me take ios as an example. After you register an account, use your ios camera to directly scan the QR code, and then the project will be opened in expo go, just like this.
Then open the project and see that it has been started
And when we modify the code in the editor, it can also be hot updated. You can see that it is not like our traditional rn project, which also has android and ios directories. It is completely our js code.
2.2. How to use external dependency packages
Because all subsequent articles will have content about raact-navigation navigation, let’s try to download it first.
yarn add @react-navigation/native @react-navigation/native-stack
```
Then we use `expo` to download dependencies
```java
expo install react-native-screens react-native-safe-area-context
```
We see that this is very confusing, so let’s do some science. In fact, `expo` helps you handle some common packages of `rn`. Some of your third-party dependencies are in `expo-go`, but many times we don’t know whether the third-party packages can be used. We go directly to the third-party packages of `rn`. Go to Fangbao [website](https://link.juejin.cn?target=https%3A%2F%2Freactnative.directory%2F) to search, and then filter it, you can see that there are quite a lot. In fact, `expo` can not only load third-party packages, but also provides you with many good `sdk`, such as `camera`, `audio`, `push`, `face recognition`, etc. (But our current development mode is actually the `dev` mode of `expo`. If you want to introduce some packages that do not support `expo`, you can go to the `dev build` mode, and you can also customize native operations).
.
So let’s take a look directly at the use of `react-navigation`.
`app.js` looks like this
```js
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Home from './src/pages/Home'
import Settings from './src/pages/Settings'
const Stack = createNativeStackNavigator()
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
)
}
```
`createNativeStackNavigator()` is a function that sets up your navigation. It returns an object with two properties, screen component and navigator component, which are used to configure our navigation.
For the `screen` component, its `name` can be understood as the `key` of this component or the mapping of the component, and `compenent` is the `component` to be rendered. In the above code, `Home` will be rendered by default when `app` is opened.
```js
import { View, Text, Button, StatusBar } from 'react-native'
import styles from './styles'
export default function Home({ navigation }) {
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<Text>Homepage</Text>
<Button title="Settings" onPress={() => navigation.navigate('Settings')} />
</View>
)
}
```
`Home`
When you press `settings`, you will be directed to the `Settings` screen, and the `navigation` function is passed to us through `screen`.
When we see the `Settings` component, we find that it is slightly different from `Home`. Yes, it has a navigation bar above it. The component name and the button to return to the previous level are displayed here, and it is actually the `navigation bar` provided by `react-navigation`.
```js
import { View, Text, Button, StatusBar } from 'react-native'
import styles from './styles'
export default function Settings({ navigation }) {
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<Text>Settings</Text>
<Button title="Home" onPress={() => navigation.navigate('Home')} />
</View>
)
}
```
Next we look at how to pass parameters, as follows
```js
import { View, Text, Button, StatusBar } from 'react-native'
import styles from './styles'
export default function Settings({ navigation }) {
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<Text>Settings</Text>
<Button title="Home" onPress={() => navigation.navigate('Home',{title: "I'm so annoyed"})} />
</View>
)
}
```
In fact, it is just the second parameter, which can be passed over. Where it is also accepted, you can also deconstruct `route` from `props` and use it directly.
```js
import { View, Text, Button, StatusBar } from 'react-native'
import styles from './styles'
export default function Home({ navigation, route }) {
const { title } = route.params;
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<Text>Homepage</Text>
<Button title="Settings" onPress={() => navigation.navigate('Settings')} />
</View>
)
}
```
So if we sometimes need to configure the `navigation header`, we need to configure the `option` again.
```javascript
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { Button } from 'react-native'
import Home from './src/pages/Home'
import Settings from './src/pages/Settings'
const Stack = createNativeStackNavigator()
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen
name="Settings"
component={Settings}
options={route => ({
headerRight: () => <Button title="test" />,
})}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
```
Finally, let’s try `tabbar` and `drawer`. You need to download the `npm` dependency and `expo` dependency first.
```java
yarn add @react-navigation/bottom-tabs @react-navigation/drawer
expo install react-native-gesture-handler react-native-reanimated
```
Then add the plug-in configuration in `babel.config.js`.
```ini
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
```
At this point our `App.js` file looks like this
```javascript
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { Platform } from 'react-native'
import Home from './Home'
import News from './News'
import Settings from './Settings'
const Tab = createBottomTabNavigator()
const Drawer = createDrawerNavigator()
export default function App() {
return (
<NavigationContainer>
{Platform.OS === 'ios' && (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="News" component={News} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
)}
{Platform.OS == 'android' && (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="News" component={News} />
<Drawer.Screen name="Settings" component={Settings} />
</Drawer.Navigator>
)}
</NavigationContainer>
)
}
```
You are now using the navigation of `tabbar` and `drwaer` instead of the one created by `createNativeStack`. Then the `Platform` is used to distinguish `Android ios`.
`Home`
```js
import React from 'react'
import { View, Text } from 'react-native'
import styles from './styles'
export default function Home() {
return (
<View style={styles.container}>
<Text>Home Content</Text>
</View>
)
}
```
`ios`
`Android`
# 3. End
This section mainly talks about scaffolding learning for getting started with `RN`, and about routing and navigation, which is relatively simple. If you have questions or want to learn something more in-depth, just go to [Boiling Point](https://juejin.cn/user/400646714977431/pins) and add me. The free class is to let everyone learn the cross-terminal framework.