这一个RN的练习项目,包含了许多功能点以及第三方库的使用,在开发中或多或少会用到,与君共勉。
1 自定义封装了类知乎客户端的tabbar,并且伴随滚动逐渐隐藏和显示头部底部功能。
2 实现本地通讯录的交互(用的是ScrollView
数据多可能会卡顿)
3 拍摄或者选择图片剪切头像(react-native-image-picker
有些bug)
4 获取本地图片 实现自定义相册功能(全部获取所有图片,对数其进行分类可以实现分类相册功能)
5 MD设计风格的第三方库(react-native-material-kit
)
6 热更新功能 code push
另一个开源项目: Rank Linking
APK 下载: linking
"dependencies": {
"react": "^15.0.2",
"react-native": "^0.26.2",
"react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
"react-native-contacts": "^0.2.6",
"react-native-image-picker": "^0.19.4",
"react-native-material-kit": "^0.3.2"
}
- 1.Prepare your environment: Requirements and Android Setup
- 2.Clone this repo, and goto the project root directory
- 3.run: npm install
- 4.run only for ios: react-native run-ios and
iOS
- 5.run only for android: react-native run-android
- 6.Enjoy
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- add
./node_modules/react-native-contacts/ios/RCTContacts.xcodeproj
- In the XCode project navigator, select your project, select the
Build Phases
tab and in theLink Binary With Libraries
section add libRCTContacts.a
- In the XCode's "Project navigator", right click on your project's Libraries folder ➜
Add Files to <...>
- Go to
node_modules
➜react-native-image-picker
➜ios
➜ selectRNImagePicker.xcodeproj
- Add
RNImagePicker.a
toBuild Phases -> Link Binary With Libraries
- Compile and have fun
- Add
node_modules/react-native-material-kit/iOS/RCTMaterialKit.xcodeproj
to your xcode project, usually under theLibraries
group - Add
libRCTMaterialKit.a
(fromProducts
underRCTMaterialKit.xcodeproj
) to build target'sLinked Frameworks and Libraries
list