我的第一个React Native App

创建项目

- 安装create-react-native-app
yarn global add create-react-native-app

- 快速创建项目
create-react-native-app Haoji

- 运行项目
cd Haoji && yarn start

- 安装expo客户端，扫描终端上的二维码

项目结构

src   //项目源码      
----components //基础组件
----navigation //导航路由
----screens    //页面组件
----utils      //工具类
.babelrc
.gitignore
App.js //入口文件
app.json
package.json
README.md

最终项目结构

API设计

- 笔记列表
url: http://m.pengjielee.cn/api/v1/notes
method: get
params: page: 1, size: 10

- 创建笔记
url: http://m.pengjielee.cn/api/v1/notes
method: post
params: title: '', content: ''

- 笔记详情
url: http://m.pengjielee.cn/api/v1/notes/:id
method: get

- 笔记删除
url: http://m.pengjielee.cn/api/v1/notes/:id
method: delete

UI设计

笔记列表页
笔记详情页
新建笔记页
个人中心页
设置页

页面设计

• 笔记列表页 [ Haoji/src/screens/NoteListScreen.js ]
• 笔记详情页 [ Haoji/src/screens/NoteDetailScreen.js ]
• 新建笔记页 [ Haoji/src/screens/NewNoteScreen.js ]
• 个人中心页 [ Haoji/src/screens/MeScreen.js ]
• 设置页 [ Haoji/src/screens/SettingScreen.js ]

导航设计

• Notes （笔记列表）
• Details （笔记详情）
• NewNote （新建笔记）
• Me （个人中心）
• Setting （设置）

Note栈导航：

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"
    }
  }
});

新建笔记栈导航

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

个人中心栈导航

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"
    }
  }
});

底部Tab导航

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

Root栈导航

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

React Native基础组件

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

第三方库：

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

源码

• 源代码
• 预览