reactNativeDemo

reactNativeDemo 是基于 react-native 官方文档，把文档所列出的基础组件（简洁、易用、高效） 和 API 实现一遍，并以演示的形式呈现出来。

在线体验

通过下面的二维码，可以在手机中安装体验 reactNativeDemo ( 内测分发密码: 123 )

	二维码	描述
Android		reactNativeDemo (点击下载apk - 内测分发密码: 123)
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(0.59.4) react-native-fs react-native-vector-icons react-native-webview react-navigation 本地运行

配置 react-native 环境

安装 react-native-cli $ npm i -g react-native-cli

克隆 reactNativeDemo 仓库到本地

安装依赖 $ 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

包含本机 Objective-C，Swift，Java 或 Kotlin 代码的 React Native 模块必须“链接”，以便编译器知道将它们包含在应用程序中。

运行 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 License

Copyright (c) 2019 cllemon。