React-Native-Demos 是基于 react-native 官方文档,把文档所列出的基础组件(简洁、易用、高效) 和 API 实现一遍,并以演示的形式呈现出来。
通过下面的二维码,可以在手机中安装体验 React-Native-Demos:
二维码 | 描述 | |
---|---|---|
Android | reactNativeDemo (点击下载apk) | |
IOS | .... | 👍 |
注:微信等扫码跳转,在浏览器打开允许下载即可。
目的是为了直观的熟悉官方提供了哪些能力,使之更熟悉 react-native ,为开发做好充分的准备。
将持续更新,直到保持和英文文档进度一致;另还将收录一些第三方库和项目沉淀的一些组件,若有任何问题欢迎交流讨论
如果对您有帮助,您可以点右上角 "Star" 鼓励一下 谢谢! ^_^
-
开发环境:
- macOS 10.14.3
- node "v8.8.0"
- react-native-cli "2.0.1"
- Android Studio "3.2"
- Xcode "10.2.1"
-
第三方框架
-
安装 react-native-cli
$ npm i -g react-native-cli
-
克隆 React-Native-Demos 仓库到本地
-
安装依赖
$ yarn || npm i
-
安装导航依赖
$ yarn add react-native-gesture-handler || npm install --save react-native-gesture-handler
-
链接资源
$ react-native link react-native-gesture-handler & react-native link react-native-webview & react-native link react-native-vector-icons & react-native link react-native-fs
-
$ cd project
-
打开模拟器
-
运行项目
$ npm run android || npm run ios
PS: 包含本机 Objective-C,Swift,Java 或 Kotlin 代码的 React Native 模块必须“链接”,以便编译器知道将它们包含在应用程序中。
PS: 运行 Android 项目时,先打开 Virtual Device 或者真机调式
-
基础组件
- View
- Text
- TextInput
- Button
- Image
- ImageBackground
- Slider
- Switch
-
通用组件
- ActivityIndicator
- ScrollView
- FlatList
- SectionList
- Modal
- Picker
- StatusBar
- TouchableHighlight
- TouchableOpacity
- TouchableWithoutFeedback
-
Component - Android
- ViewPagerAndroid
- DrawerLayoutAndroid
- ProgressBarAndroid
- ToolbarAndroid
-
Component - IOS
- DatePickerIOS
- MaskedViewIOS
- PickerIOS
- ProgressViewIOS
- SegmentedControlIOS
- SnapshotViewIOS
- SafeAreaView
-
API - 交互
- Alert
- AccessibilityInfo
- AppState
- ToastAndroid
- CameraRoll
- Clipboard
- Dimensions
- DatePickerAndroid
- PermissionsAndroid
- TimePickerAndroid
- Share
- ActionSheetIOS
- ImagePickerIOS
- Geolocation => 待续
- AsyncStorage => 待续
- AppRegistry => 待续
- BackHandler => 待续
- ImageEditor => 待续
- ImageStore => 待续
- InteractionManager => 待续
- Keyboard => 待续
- Linking => 待续
- NetInfo => 待续
- PanResponder => 待续
- Settings => 待续
- Systrace
- Vibration => 待续
-
API - 布局
- FlexBox
-
API - 动画
- Animated => 待续
- Easing => 待续
- LayoutAnimation => 待续
-
API - 样式
- ImageStyle => 待续
- PixelRatio => 待续
- Shadow => 待续
- StyleSheet => 待续
- TextStyle => 待续
- Transforms => 待续
- ViewStyle => 待续
本项目基于 MIT License - Copyright (c) 2019 lemon。