功能修改

Author: FTD-ZF

ios/ReactNativeMobxFrame.xcodeproj/project.pbxproj

@@ -43,6 +43,7 @@
     "react-native-shimmer-placeholder": "^1.0.35",
     "react-native-snap-carousel": "^3.8.0",
     "react-native-svg": "^9.5.1",
+    "react-native-swipeout": "^2.3.6",
     "react-native-video": "^4.4.4",
     "react-navigation": "^3.7.1",
     "react_native_countdowntimer": "^1.0.5",
@@ -52,6 +53,7 @@
   "devDependencies": {
     "@babel/core": "^7.4.3",
     "@babel/runtime": "^7.4.3",
+    "@babel/template": "^7.7.4",
     "babel-jest": "^24.7.1",
     "jest": "^24.7.1",
     "metro-react-native-babel-preset": "^0.53.1",

package.json

@@ -15,7 +15,7 @@ import { headerOptions, RouteConfigs, } from './commons/components/navConfig';
 // import { HomeTab, MineTab, DetailsView, CenterView, LoginView, OnePageView, TwoPageView, VideoPage, PlaceHolderPage, FontAdapterPage, DragListItemPage } from './root';
 import { AppColors, AppStyles } from './commons/styles/index';
 import CustomTabComponent from './commons/components/Tab';
-import { PageName } from './root';
+import { PageName, NavPages } from './root';
 const TabBarText = {
     home: '首页',
     centertext: '新增',

src/navigation.js

@@ -23,12 +23,14 @@ import AppStyles from '../../../commons/styles/styles';
 import AppColors from '../../../commons/styles/colors';
 import DragSortableView from 'react-native-drag-sort';
 import { screen, dFont, aWidth, aHeight, } from '../../../commons/utils/screenUtils';
+import Swipeout from 'react-native-swipeout';
+import { Toast } from 'teaset';
 
 
 export default class Index extends Component {
 
     static navigationOptions = ({ navigation }) => ({
-        headerTitle: 'Item拖动',
+        headerTitle: 'Item拖动，侧滑',
     });
 
 
@@ -47,14 +49,48 @@ export default class Index extends Component {
     }
 
 
-    renderDeleteItem(item, index) {
+    editItem(item, index) {
+        Toast.message('编辑******' + index)
+    }
+
+    deleteItem(item, index) {
+        Toast.message(item.name + '****' + index)
+        this.state.firstData.splice(index, 1);
+
+        let data = [];
+        this.state.firstData.map((item, index) => {
+            data.push(item)
+        })
+
+        this.setState({
+            firstData: data
+        })
+    }
+
+    renderItem(item, index) {
+        let swipeoutBtns = [
+            {
+                text: '编辑',
+                backgroundColor: 'green',
+                onPress: () => this.editItem(item, index)
+
+            },
+            {
+                text: '删除',
+                backgroundColor: 'red',
+                onPress: () => this.deleteItem(item, index)
+
+            }
+        ]
         return (
-            <View style={{ backgroundColor: 'blue', }}>
-                <View style={{ flexDirection: 'row', paddingRight: 19, width: screen.width, height: 50, alignItems: 'center' }}>
-                    <Text style={{ color: 'red', fontSize: 13 }}>{item.name}</Text>
+            <Swipeout right={swipeoutBtns}>
+                <View style={{ backgroundColor: 'blue', }}>
+                    <View style={{ flexDirection: 'row', paddingRight: 19, width: screen.width, height: 50, alignItems: 'center' }}>
+                        <Text style={{ color: 'white', fontSize: 13 }}>{item.name}</Text>
+                    </View>
+                    <View style={{ height: 0.5, backgroundColor: AppColors.dark9 }} />
                 </View>
-                <View style={{ height: 0.5, backgroundColor: AppColors.dark9 }} />
-            </View>
+            </Swipeout>
         )
     }
     _keyExtractor = (item, index) => {
@@ -110,7 +146,7 @@ export default class Index extends Component {
 
                     }}
                     renderItem={(item, index) => {
-                        return this.renderDeleteItem(item, index)
+                        return this.renderItem(item, index)
                     }}
                 />
             </ScrollView>

src/pages/center/DragListItem/index.js

@@ -86,7 +86,7 @@ export default class Index extends Component {
                     width: '100%', alignItems: 'center', paddingVertical: 20,
                     backgroundColor: 'yellow', marginTop: 10
                 }} onPress={() => this._dragListItem()}>
-                    <Text style={{ color: 'black', fontSize: 18 }}>item拖动</Text>
+                    <Text style={{ color: 'black', fontSize: 18 }}>item拖动，侧滑</Text>
                 </TouchableOpacity>
 
             </View>

src/pages/center/index.js

@@ -13,7 +13,9 @@ import DragListItemPage from './pages/center/DragListItem';
 
 
 
-
+/**
+ * 页面添加时使用该值
+ */
 export const PageName = {
     HomeTab,
     MineTab,
@@ -31,6 +33,9 @@ export const PageName = {
 
 
 
+/**
+ * 跳转页面时使用该值跳转
+ */
 export const NavPages = {
     HomeTab: 'HomeTab',
     MineTab: 'MineTab',

src/root.js

@@ -211,6 +211,10 @@
   version "7.4.3"
   resolved "http://registry.npm.taobao.org/@babel/parser/download/@babel/parser-7.4.3.tgz#eb3ac80f64aa101c907d4ce5406360fe75b7895b"
 
+"@babel/parser@^7.7.4":
+  version "7.7.7"
+  resolved "https://registry.npm.taobao.org/@babel/parser/download/@babel/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937"
+
 "@babel/plugin-external-helpers@^7.0.0":
   version "7.2.0"
   resolved "http://registry.npm.taobao.org/@babel/plugin-external-helpers/download/@babel/plugin-external-helpers-7.2.0.tgz#7f4cb7dee651cd380d2034847d914288467a6be4"
@@ -561,6 +565,14 @@
     "@babel/parser" "^7.4.0"
     "@babel/types" "^7.4.0"
 
+"@babel/template@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.npm.taobao.org/@babel/template/download/@babel/template-7.7.4.tgz?cache=0&sync_timestamp=1574465948896&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftemplate%2Fdownload%2F%40babel%2Ftemplate-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.7.4"
+    "@babel/types" "^7.7.4"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.0", "@babel/traverse@^7.4.3":
   version "7.4.3"
   resolved "http://registry.npm.taobao.org/@babel/traverse/download/@babel/traverse-7.4.3.tgz#1a01f078fc575d589ff30c0f71bf3c3d9ccbad84"
@@ -583,6 +595,14 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.7.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "http://registry.npm.taobao.org/@cnakazawa/watch/download/@cnakazawa/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -1517,7 +1537,7 @@ create-react-class@15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-create-react-class@^15.6.2, create-react-class@^15.6.3:
+create-react-class@^15.6.0, create-react-class@^15.6.2, create-react-class@^15.6.3:
   version "15.6.3"
   resolved "http://registry.npm.taobao.org/create-react-class/download/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   dependencies:
@@ -3249,6 +3269,10 @@ lodash@^4.17.11, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.11"
   resolved "http://registry.npm.taobao.org/lodash/download/lodash-4.17.11.tgz?cache=0&other_urls=http%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
+lodash@^4.17.13:
+  version "4.17.15"
+  resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.15.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "http://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -4335,6 +4359,12 @@ query-string@^6.2.0:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
+raf@^3.1.0:
+  version "3.4.1"
+  resolved "https://registry.npm.taobao.org/raf/download/raf-3.4.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fraf%2Fdownload%2Fraf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  dependencies:
+    performance-now "^2.1.0"
+
 randomatic@^3.0.0:
   version "3.1.1"
   resolved "http://registry.npm.taobao.org/randomatic/download/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
@@ -4512,6 +4542,14 @@ react-native-svg@^9.5.1:
   version "9.5.1"
   resolved "https://registry.npm.taobao.org/react-native-svg/download/react-native-svg-9.5.1.tgz#eb21fa7eb5d71649620541e6549c6ed425d80240"
 
+react-native-swipeout@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.npm.taobao.org/react-native-swipeout/download/react-native-swipeout-2.3.6.tgz#47dac8a835825cf3f2eef9e495574a3d9ab6d3fa"
+  dependencies:
+    create-react-class "^15.6.0"
+    prop-types "^15.5.10"
+    react-tween-state "^0.1.5"
+
 react-native-tab-view@^1.2.0, react-native-tab-view@^1.3.4:
   version "1.3.4"
   resolved "http://registry.npm.taobao.org/react-native-tab-view/download/react-native-tab-view-1.3.4.tgz#63fc3eb09652651d0ea0e016cff0f3a5e535f4de"
@@ -4637,6 +4675,13 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
+react-tween-state@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.npm.taobao.org/react-tween-state/download/react-tween-state-0.1.5.tgz#e98b066551efb93cb92dd1be14995c2e3deae339"
+  dependencies:
+    raf "^3.1.0"
+    tween-functions "^1.0.1"
+
 react@16.8.3:
   version "16.8.3"
   resolved "http://registry.npm.taobao.org/react/download/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9"
@@ -5416,6 +5461,10 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tween-functions@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/tween-functions/download/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "http://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"