建立專案
- 安裝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