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

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

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.

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.

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

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.

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.

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.

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.

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

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

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 and add me. The free class is to let everyone learn the cross-terminal framework.