组件列表

App.js

@@ -7,7 +7,8 @@
  */
 
 import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import {Platform, StyleSheet, View} from 'react-native';
+import Text from './src/components/Text';
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',

android/app/build.gradle

@@ -102,7 +102,7 @@ android {
     }
 
     defaultConfig {
-        applicationId "{{packageName}}"
+        applicationId "com.basicapp"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
@@ -138,10 +138,11 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-gesture-handler')
+    implementation project(':lottie-react-native')
     implementation project(':react-native-linear-gradient')
     implementation project(':react-native-device-info')
     implementation project(':react-native-spring-scrollview')
-    implementation project(':react-native-gesture-handler')
     implementation project(':react-native-vector-icons')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

android/app/src/main/java/com/basicapp/MainActivity.java

 package com.basicapp;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+//导入的包
+
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +16,15 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "BasicApp";
     }
+
+    //方法
+//    @Override
+//    protected ReactActivityDelegate createReactActivityDelegate() {
+//        return new ReactActivityDelegate(this, getMainComponentName()) {
+//            @Override
+//            protected ReactRootView createRootView() {
+//                return new RNGestureHandlerEnabledRootView(MainActivity.this);
+//            }
+//        };
+//    }
 }

android/app/src/main/java/com/basicapp/MainApplication.java

@@ -3,6 +3,8 @@ package com.basicapp;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
+import com.airbnb.android.react.lottie.LottiePackage;
 import com.BV.LinearGradient.LinearGradientPackage;
 import com.learnium.RNDeviceInfo.RNDeviceInfo;
 import com.bolan9999.SpringScrollViewPackage;
@@ -27,6 +29,8 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new RNGestureHandlerPackage(),
+            new LottiePackage(),
             new LinearGradientPackage(),
             new RNDeviceInfo(),
             new SpringScrollViewPackage(),

android/settings.gradle

 rootProject.name = 'BasicApp'
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
+include ':lottie-react-native'
+project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
 include ':react-native-linear-gradient'
 project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 include ':react-native-device-info'
@@ -7,7 +11,5 @@ include ':react-native-spring-scrollview'
 project(':react-native-spring-scrollview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spring-scrollview/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
-include ':react-native-gesture-handler'
-project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 
 include ':app'

package.json

@@ -12,19 +12,21 @@
     "@react-native-community/async-storage": "^1.4.0",
     "axios": "^0.18.0",
     "lodash": "^4.17.11",
+    "lottie-react-native": "^2.6.1",
     "moment": "^2.24.0",
     "react": "16.8.3",
     "react-native": "0.59.5",
-    "react-native-device-info": "^2.1.1",
+    "react-native-device-info": "^2.1.3",
     "react-native-elements": "^1.1.0",
     "react-native-fast-image": "^6.0.3",
-    "react-native-gesture-handler": "^1.1.0",
+    "react-native-gesture-handler": "^1.2.2",
+    "react-native-image-header-scroll-view": "^0.10.3",
     "react-native-largelist-v3": "^3.0.14",
     "react-native-linear-gradient": "^2.5.4",
     "react-native-spring-scrollview": "^2.0.22",
     "react-native-update-mutlirn-hg": "^3.1.1",
     "react-native-vector-icons": "^6.4.2",
-    "react-navigation": "^3.9.1",
+    "react-navigation": "^3.11.0",
     "react-navigation-redux-helpers": "^3.0.2",
     "react-redux": "^7.0.3",
     "redux": "^4.0.1",

src/BasicNavigator/navigationStack.js

 /**
  * @flow
  */
+import { NativeAppEventEmitter } from 'react-native';
 import {
   createBottomTabNavigator,
   createStackNavigator,
@@ -20,6 +21,7 @@ import BadgePage from '../pages/badgeDemo';
 import CheckBoxPage from '../pages/checkBoxDemo';
 import RatingPage from '../pages/ratingDemo';
 import SliderPage from '../pages/sliderDemo';
+import TooltipPage from '../pages/tooltipDemo';
 
 import { initialRouteName, RootPageInitialName } from '../utils/constants';
 import { TabOptions } from '../components/TabOptions';
@@ -114,15 +116,20 @@ const navigator = createStackNavigator({
   SliderPage: {
     screen: SliderPage,
   },
+  TooltipPage: {
+    screen: TooltipPage,
+  },
 }, {
   initialRouteName,
   headerMode: 'none',
   defaultNavigationOptions: {
     gesturesEnabled: false,
+    gestureDirection: 'default',  // inverted
   },
   disableKeyboardHandling: false,
   cardShadowEnabled: true,
   cardOverlayEnabled: true,
+  onTransitionEnd: () => NativeAppEventEmitter.emit('react_navigation_onTransitionEnd_call'),
 });
 
 //export default navigator;

src/components/NavigationBar/index.js

@@ -6,13 +6,13 @@ import React, { Element } from 'react';
 import { connect } from 'react-redux';
 import {
   View,
-  Text,
   Platform,
   TouchableOpacity,
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 import LinearGradient from 'react-native-linear-gradient';
 import StyleSheet from '../../utils/StyleSheet';
+import Text from '../Text';
 
 export const isLessKitKat = Platform.OS === 'android' && Platform.Version > 19;
 

src/components/TabOptions/TabButton.js

@@ -5,9 +5,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import { Badge } from 'react-native-elements';
 import Index from '../BasicIcon';
+import Text from '../Text';
 
 type Props = {}
 
@@ -25,7 +26,7 @@ class TabButton extends Component<Props> {
           style={{ margin: 0, padding: 0 }}
           suite={iconSuite}
           name={tabBarIconName}
-          size={28}
+          size={26}
           color={color}
         />
         <Text

src/components/Text/index.js

+// @flow
+import React from 'react';
+import { Text } from 'react-native';
+
+export default function (props) {
+  return (
+    <Text
+      allowFontScaling={false}
+      {...props}
+    >
+      {props.children}
+    </Text>
+  );
+}

src/components/TextInput/index.js

+// @flow
+import React from 'react';
+import { TextInput } from 'react-native';
+
+export default function (props) {
+  return (
+    <TextInput
+      allowFontScaling={false}
+      {...props}
+    />
+  );
+}

src/pages/changeThemePage/index.js

@@ -9,7 +9,6 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
-  Text,
   View,
   TouchableOpacity,
 } from 'react-native';

src/pages/home/FramePage.js

@@ -8,14 +8,16 @@
  */
 
 import React, { Component } from 'react';
+import HeaderImageScrollView from 'react-native-image-header-scroll-view';
 import {
   StyleSheet,
-  Text,
   View,
+  RefreshControl,
   TouchableOpacity,
 } from 'react-native';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import Text from '../../components/Text';
 import { push } from '../../BasicNavigator/actions';
 
 
@@ -23,10 +25,19 @@ type Props = {};
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
+  titleContainer: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  imageTitle: {
+    color: 'white',
+    backgroundColor: 'transparent',
+    fontSize: 24
+  },
   instructions: {
     textAlign: 'center',
     color: '#333333',
@@ -38,9 +49,44 @@ class NativeComponentList extends Component<Props> {
   render() {
     return (
       <View style={styles.container}>
-        <TouchableOpacity onPress={() => { this.props.push('JSPage', {test:1}); }}>
-          <Text style={styles.instructions}>NativeComponentList</Text>
-        </TouchableOpacity>
+        <HeaderImageScrollView
+          maxHeight={200}
+          minHeight={50}
+          fadeOutForeground
+          overScrollMode="never"
+          overlayColor="red"
+          maxOverlayOpacity={0.4}
+          renderTouchableFixedForeground={() => (
+            <View style={{ height: 200, justifyContent: 'center', alignItems: 'center' }}>
+              <TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}>
+                <Text style={styles.buttonText}>Click Me!</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+          scrollViewBackgroundColor="#ddddff"
+          refreshControl={
+            <RefreshControl
+              refreshing={false}
+              // onRefresh={this._onRefresh.bind(this)}
+              tintColor="red"
+            />
+          }
+          renderForeground={() => (
+            <View style={styles.titleContainer}>
+              <Text style={styles.imageTitle}>Cat</Text>
+            </View>
+          )}
+          foregroundParallaxRatio={1}
+        >
+          <View style={{ height: 100, backgroundColor: '#4CAF50' }} />
+          <View style={{ height: 100, backgroundColor: '#F44336' }} />
+          <View style={{ height: 100, backgroundColor: '#009688' }} />
+          <View style={{ height: 100, backgroundColor: '#03A9F4' }} />
+          <View style={{ height: 100, backgroundColor: '#FF9800' }} />
+          <View style={{ height: 100, backgroundColor: '#673AB7' }} />
+          <View style={{ height: 100, backgroundColor: '#795548' }} />
+          <View style={{ height: 100, backgroundColor: '#FFEB3B' }} />
+        </HeaderImageScrollView>
       </View>
     );
   }

src/pages/home/JSComponentList.js

@@ -9,12 +9,12 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
-  Text,
   View,
   TouchableOpacity,
 } from 'react-native';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import Text from '../../components/Text';
 import { push } from '../../BasicNavigator/actions';
 
 

src/pages/home/NativeComponentList.js

@@ -11,12 +11,12 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { LargeList } from 'react-native-largelist-v3';
 import {
-  Text,
   View,
   TouchableOpacity,
 } from 'react-native';
 import { push } from '../../BasicNavigator/actions';
 import NavigationBar from '../../components/NavigationBar';
+import Text from '../../components/Text';
 import Styles from '../../theme/Styles';
 
 const data = [
@@ -32,6 +32,7 @@ const data = [
       { name: '选择框', page: 'CheckBoxPage' },
       { name: '评分', page: 'RatingPage' },
       { name: '拖吧', page: 'SliderPage' },
+      { name: '气泡', page: 'TooltipPage' },
     ],
   },
 ];

src/pages/navigationDemo/JSPage.js

@@ -6,10 +6,10 @@
  * @flow
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
-  Text,
   View,
+  NativeAppEventEmitter,
 } from 'react-native';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
@@ -18,6 +18,7 @@ import NavigationBar from '../../components/NavigationBar';
 import BackButton from '../../components/BackButton';
 import Button from '../../components/ThemeButton';
 import Styles from '../../theme/Styles';
+import Text from '../../components/Text';
 
 type Props = {
   pushTo: ()=> void,
@@ -25,8 +26,20 @@ type Props = {
 };
 
 function JSPage(props: Props) {
-  console.log('JSPage_props:', props);
   //console.log('JSPage props from lastPage', this.props.navigation.state);
+  useEffect(() => {
+    console.log('在 dep 改变时触发,若无 dep 则,每次更新组件都会触发')
+    const didFocus = NativeAppEventEmitter.addListener('react_navigation_onTransitionEnd_call', () => {
+      console.log('JSPage__didFocus');
+    })
+    return () => {
+      console.log('在组件 unmount 时触发');
+      if(didFocus){
+        didFocus.remove();
+      }
+    };
+  })
+
   return (
     <View style={Styles.container}>
       <NavigationBar

src/pages/navigationDemo/NativePage.js

@@ -8,8 +8,6 @@
 
 import React, { Component } from 'react';
 import {
-  StyleSheet,
-  Text,
   View,
 } from 'react-native';
 import { compose } from 'redux';
@@ -19,7 +17,7 @@ import NavigationBar from '../../components/NavigationBar';
 import BackButton from '../../components/BackButton';
 import Button from '../../components/ThemeButton';
 import Styles from '../../theme/Styles';
-
+import Text from '../../components/Text';
 type Props = {
   routes: Array,
   popTo: () => void

src/pages/sectionListDemo/index.js

@@ -37,7 +37,7 @@ class SectionListPage extends Component<Props> {
 
   renderIndexPath = ({ section, row }) => {
     return (
-      <View style={Styles.row}>
+      <View style={[Styles.row]}>
         <Text>
           Section
           {' '}

src/pages/sliderDemo/index.js

@@ -14,7 +14,7 @@ import {
   Text,
   ScrollView,
 } from 'react-native';
-import { Slider } from 'react-native-elements';
+import { Slider } from 'react-native-elements/src/index';
 import { push } from '../../BasicNavigator/actions';
 import NavigationBar from '../../components/NavigationBar';
 import BackButton from '../../components/BackButton';

src/pages/tooltipDemo/index.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  View,
+  ScrollView,
+} from 'react-native';
+import { Tooltip, Text } from 'react-native-elements/src/index';
+import { push } from '../../BasicNavigator/actions';
+import NavigationBar from '../../components/NavigationBar';
+import BackButton from '../../components/BackButton';
+import Styles from '../../theme/Styles';
+
+type
+  Props = {
+  theme : Object,
+};
+
+function TooltipPage(props : Props) {
+  const { theme } = props;
+  const [value, setValue] = useState(0);
+  return (
+    <View style={Styles.container} >
+      <NavigationBar
+        title="拖拽"
+        left={<BackButton />}
+      />
+      <ScrollView style={{ height: global.SCREEN_HEIGHT - 60 }} >
+        <View style={{
+          flex: 1, alignItems: 'stretch', justifyContent: 'center',
+        }}
+        >
+          <View style={{ height:100, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }} >
+            <Tooltip
+              withPointer={false}
+              popover={<Text>no caret</Text>}>
+              <Text>without caret</Text>
+            </Tooltip>
+
+            <Tooltip popover={<Text>Info here</Text>}>
+              <Text>Press me</Text>
+            </Tooltip>
+          </View >
+          <View style={{ height: 300,flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }} >
+            <Tooltip
+              backgroundColor="#3bff90"
+              popover={<Text>backgroundColor</Text>}
+            >
+              <Text>i`m different</Text>
+            </Tooltip>
+
+            <Tooltip popover={<Text>Info here</Text>}>
+              <Text>Press me</Text>
+            </Tooltip>
+
+          </View >
+          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }} >
+            <Tooltip
+              withOverlay={false}
+              popover={<Text style={{color:'#fff'}}>no Overlay</Text>}>
+              <Text >without Overlay</Text>
+            </Tooltip>
+
+            <Tooltip popover={<Text>Info here</Text>}>
+              <Text>Press me</Text>
+            </Tooltip>
+          </View >
+        </View >
+      </ScrollView >
+    </View >
+  );
+}
+
+
+function actionMapping(dispatch) {
+  return {
+    pushTo: compose(dispatch, push),
+  };
+}
+
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, actionMapping)(TooltipPage);

yarn.lock

@@ -2142,6 +2142,11 @@ decompress-zip@^0.3.1:
     readable-stream "^1.1.8"
     touch "0.0.3"
 
+dedent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.6.0.tgz#0e6da8f0ce52838ef5cec5c8f9396b0c1b64a3cb"
+  integrity sha1-Dm2o8M5Sg471zsXI+TlrDBtko8s=
+
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -4719,6 +4724,21 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-ios@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/lottie-ios/-/lottie-ios-2.5.0.tgz#55c808e785d4a6933b0c10b395530b17098b05de"
+  integrity sha1-VcgI54XUppM7DBCzlVMLFwmLBd4=
+
+lottie-react-native@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/lottie-react-native/-/lottie-react-native-2.6.1.tgz#330d24fa6aac5928ea63f8e181b9b7d930a1a119"
+  integrity sha512-Z+6lARvWWhB8n8OSmW7/aHkV71ftsmO7hYXFt0D+REy/G40mpkQt1H7Cdy1HqY4cKAp7EYDWVxhu5+fkdD6o4g==
+  dependencies:
+    invariant "^2.2.2"
+    lottie-ios "2.5.0"
+    prop-types "^15.5.10"
+    react-native-safe-module "^1.1.0"
+
 lru-cache@^4.0.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -6121,7 +6141,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6280,10 +6300,10 @@ react-native-debugger-open@^0.3.19:
     minimist "^1.2.0"
     semver "^5.4.1"
 
-react-native-device-info@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-2.1.1.tgz#c6ddc022033756a5e4c5899eb83e390b5a18cc17"
-  integrity sha512-H0qq9UdP3zGESYH4HMPuv2A/FwOMszVbktj0JWuT/eVhW97PyRkYcobhFd1ggW0U+ksVSewSyX+JenQejGp7+w==
+react-native-device-info@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-2.1.3.tgz#7463f826a420a53210be89cf671345d1fa92843f"
+  integrity sha512-PmF2dHjoxzYfq0VQ+a1E82z2Bf+8svUk2JoYmgkAI/EPrWfbrKYSC3WxRv4/VAUS0RsGMLnYw+Ygtuf4hIXpew==
 
 react-native-elements@^1.1.0:
   version "1.1.0"
@@ -6312,6 +6332,13 @@ react-native-gesture-handler@^1.1.0:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
+react-native-image-header-scroll-view@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/react-native-image-header-scroll-view/-/react-native-image-header-scroll-view-0.10.3.tgz#1de117fc6a8735aa345a8e6d3bf22f45c4c41742"
+  integrity sha512-5eYNcnZA8Q3jdi/uAIuKvsVg6xg9XNLwF8Bgb7ePtAMVOS5WQgJwgewCNWm191HQ+uLYq35B2wNkFK5rUPYZCw==
+  dependencies:
+    prop-types "^15.6.0"
+
 react-native-largelist-v3@^3.0.14:
   version "3.0.14"
   resolved "https://registry.yarnpkg.com/react-native-largelist-v3/-/react-native-largelist-v3-3.0.14.tgz#0b03dc588ed90f90432361f91ffa26d8e529e7c0"
@@ -6337,6 +6364,13 @@ react-native-safe-area-view@^0.13.0:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
+react-native-safe-module@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-module/-/react-native-safe-module-1.2.0.tgz#a23824ca24edc2901913694a76646475113d570d"
+  integrity sha1-ojgkyiTtwpAZE2lKdmRkdRE9Vw0=
+  dependencies:
+    dedent "^0.6.0"
+
 "react-native-screens@^1.0.0 || ^1.0.0-alpha":
   version "1.0.0-alpha.22"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz#7a120377b52aa9bbb94d0b8541a014026be9289b"