liuxuanhai / reactNativeDemo

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

本地运行

1. 配置 react-native 环境

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

3. 克隆 reactNativeDemo 仓库到本地

4. 安装依赖 $ yarn || npm i

5. 安装导航依赖 $ yarn add react-native-gesture-handler || npm install --save react-native-gesture-handler

6. 链接资源 $ 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

7. $ cd project

8. 打开模拟器

9. 运行项目 $ 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。