Create a project

- Install create-react-native app YARN global add create-react-native app - Quickly create a project create-react-native app Haoji - Run a projectcdHaoji && YARN Start - Install the EXPO client and scan the QR code on the terminalCopy the code

The project structure

----components // basic components ----navigation // Navigation route ----screens // Page component ----utils // tools.babelrc.gitignore app.js // import file app.json package.json readme.mdCopy the code

API design

- notes list url: http://m.pengjielee.cn/api/v1/notes method: get params: page: 1, size: 10 - to create notes url: http://m.pengjielee.cn/api/v1/notes method: post params: title:' ', content: ' '- note details url: http://m.pengjielee.cn/api/v1/notes/:id method: get - notes delete url: http://m.pengjielee.cn/api/v1/notes/:id method: deleteCopy the code

UI design

Page design

  • Notes page list [Haoji/SRC/screens/NoteListScreen js]
  • Note details page [Haoji/SRC/screens/NoteDetailScreen js]
  • New notes page [Haoji/SRC/screens/NewNoteScreen js]
  • Personal center page [Haoji/SRC/screens/MeScreen js]
  • Settings page [Haoji/SRC/screens/SettingScreen js]

Navigation design

  • Notes (Notes list)
  • Details of your notes
  • NewNote (NewNote)
  • Me (Personal Centre)
  • Setting

Note stack navigation:

export const NoteStack = StackNavigator({
  Notes: {
    screen: NoteListScreen,
    navigationOptions: {
      title: "Note List",
      headerStyle: {
        backgroundColor: "#f36838"
      },
      headerTintColor: "#fff"
    }
  },
  Details: {
    screen: NoteDetailScreen,
    navigationOptions: {
      title: "Note Detail",
      headerStyle: {
        backgroundColor: "#f36838"
      },
      headerTintColor: "#fff"}}});Copy the code

Create a note stack navigation

export const NewNoteStack = StackNavigator({
  NoteNote: {
    screen: NewNoteScreen,
    navigationOptions: {
      title: "New Note",
      headerStyle: {
        backgroundColor: "#4b5cc4"
      },
      headerTintColor: "#fff"}}});Copy the code

Personal center stack navigation

export const MeStack = StackNavigator({
  Me: {
    screen: MeScreen,
    navigationOptions: {
      title: "Me",
      headerStyle: {
        backgroundColor: "#ff4e20"
      },
      headerTintColor: "#fff"
    }
  },
  Setting: {
    screen: SettingScreen,
    navigationOptions: {
      title: "Setting",
      headerStyle: {
        backgroundColor: "#ff4e20"
      },
      headerTintColor: "#fff"}}});Copy the code

Bottom Tab navigation

export const Tabs = TabNavigator(
  {
    Notes: {
      screen: NoteStack
    },
    New: {
      screen: NewNoteStack
    },
    Me: {
      screen: MeStack
    }
  }
);
Copy the code

Root stack navigation

export const RootStack = StackNavigator(
  {
    Tabs: {
      screen: Tabs
    }
  },
  {
    mode: "modal",
    headerMode: "none",
    initialRouteName: "Tabs"});Copy the code

React Native base components

  • View
  • Text
  • TextInput
  • Alert
  • FlatList
  • TouchableOpacity
  • ActivityIndicator
  • StyleSheet

Third Party library:

  • react-navigation
  • react-native-elements
  • react-native-vector-icons

The source code

  • The source code
  • preview