joncv/reactnativedemo

🍋 React-Native 官方文档示例演示

React-Native-Demos

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(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. 克隆 React-Native-Demos 仓库到本地

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

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。