React-Native-Demo是基於 react-native 官方文件,把文件所列出的基礎元件(簡潔、易用、高效) 和 API 實現一遍,並以演示的形式呈現出來。
-
目的是為了直觀的熟悉官方提供了哪些能力,使之更熟悉 react-native ,為開發做好充分的準備。
-
將持續更新,保持和英文文件進度一致;另還將收錄一些第三方庫和專案沉澱的一些元件,若有任何問題歡迎交流討論。
-
具體參見專案
演示圖例



檢視更多圖例






通過下面的二維碼,可以在手機中安裝體驗 React-Native-Demo:
二維碼 | 描述 | |
---|---|---|
Android | ![]() |
reactNativeDemo.apk |
IOS | ... | ? |
注:微信等掃碼跳轉,在瀏覽器開啟允許下載即可。
第三方框架及開發環境
- 開發環境:
- macOS 10.14.3
- node "v8.8.0"
- react-native-cli "2.0.1"
- Android Studio "3.2"
- Xcode "10.2.1"
- 第三方框架
更新進度
-
基礎元件
- View
- Text
- TextInput
- Button
- Image
- ImageBackground
- Slider
- Switch
-
通用元件
- ActivityIndicator
- ScrollView
- FlatList
- SectionList
- Modal
- Picker
- StatusBar
- ViewPagerAndroid
- TouchableHighlight
- TouchableOpacity
- TouchableWithoutFeedback
-
Component - Android
- DrawerLayoutAndroid
- ProgressBarAndroid
- ToolbarAndroid
-
Component - IOS
-
DatePickerIOS
-
MaskedViewIOS
-
PickerIOS
-
ProgressViewIOS
-
SegmentedControlIOS
-
SafeAreaView
-
SnapshotViewIOS
-
-
API - 互動
- Alert
- AccessibilityInfo
- AppState
- ToastAndroid
- CameraRoll
- Clipboard
- Dimensions
- DatePickerAndroid
- Geolocation
- AsyncStorage
- ActionSheetIOS
- AppRegistry
- BackHandler
- ImageEditor
- ImagePickerIOS
- ImageStore
- InteractionManager
- Keyboard
- Linking
- NetInfo
- PanResponder
- PermissionsAndroid
- Settings
- Share
- Systrace
- TimePickerAndroid
- Vibration
-
API - 佈局
- FlexBox
-
API - 動畫
- Animated
- Easing
- LayoutAnimation
-
API - 樣式
- ImageStyle
- PixelRatio
- Shadow
- StyleSheet
- TextStyle
- Transforms
- ViewStyle