fix: rn android segmented-control active style, ref #1832

ant-design · Sep 12, 2017 · 5a438b1 · 5a438b1
1 parent dc43ef5
commit 5a438b1
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/ant-design-analysis b/ant-design-analysis
diff --git a/components/segmented-control/segmented.android.tsx b/components/segmented-control/segmented.android.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { View, Text, TouchableWithoutFeedback, StyleSheet } from 'react-native';
+import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';
+import setNormalizedColorAlpha from 'react-native/Libraries/StyleSheet/setNormalizedColorAlpha';
+import normalizeColor from 'react-native/Libraries/StyleSheet/normalizeColor';
 import SegmentedControlProps from './PropsType';
 import AndroidStyle, { ISegmentControlStyle } from './style/index.native';
 
@@ -25,6 +27,7 @@ export default class SegmentedControl extends React.Component<ISegmentControlNat
     super(props);
     this.state = {
       selectedIndex: props.selectedIndex,
+      active: false,
     };
   }
 
@@ -67,18 +70,27 @@ export default class SegmentedControl extends React.Component<ISegmentControlNat
       }
 
       const itemStyle = [styles.item, itemRadius, {
-        backgroundColor: idx === selectedIndex ? tintColor : '#fff',
+        backgroundColor: idx === selectedIndex ? tintColor : 'transparent',
         borderColor: tintColor,
       }];
 
+      const underlayColor = idx === selectedIndex ? tintColor : setNormalizedColorAlpha(
+        normalizeColor(tintColor), 0.3,
+      );
+
       return (
-        <TouchableWithoutFeedback key={idx} onPress={(e?: any) => this.onPress(e, idx, value)}>
-          <View style={itemStyle} >
-            <Text style={[styles.itemText, { color: idx === selectedIndex ? '#fff' : tintColor }]}>
-              {value}
-            </Text>
-          </View>
-        </TouchableWithoutFeedback>
+        <TouchableHighlight
+          disabled={disabled}
+          key={idx}
+          onPress={(e?: any) => this.onPress(e, idx, value)}
+          underlayColor={underlayColor}
+          style={itemStyle}
+          activeOpacity={1}
+        >
+          <Text style={[styles.itemText, { color: idx === selectedIndex ? '#fff' : tintColor }]}>
+            {value}
+          </Text>
+        </TouchableHighlight>
       );
     });
 

diff --git a/components/segmented-control/style/index.native.tsx b/components/segmented-control/style/index.native.tsx
@@ -1,4 +1,4 @@
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleSheet } from 'react-native';
 import variables from '../../style/themes/default.native';
 
 export interface ISegmentControlStyle {
@@ -12,15 +12,15 @@ export default {
   segment: {
     flexDirection: 'row',
     overflow: 'hidden',
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
     borderColor: variables.brand_primary,
     borderRadius: variables.radius_md,
   },
   item: {
     flex: 1,
     paddingVertical: variables.h_spacing_sm,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
+    borderLeftWidth: StyleSheet.hairlineWidth,
+    borderRightWidth: StyleSheet.hairlineWidth,
     borderStyle: 'solid',
     alignItems: 'center',
     justifyContent: 'center',

diff --git a/rn-kitchen-sink/android/app/build.gradle b/rn-kitchen-sink/android/app/build.gradle
@@ -69,6 +69,8 @@ project.ext.react = [
   entryFile: file("../../index.android.js")
 ]
 
+project.ext.nodeModulesPath = "../../../node_modules";
+
 apply from: "../../../node_modules/react-native/react.gradle"
 apply from: "../../../node_modules/react-native-code-push/android/codepush.gradle"
+4 −1		antd-mobile-versions.json
+208 −0		antd-mobile@1.6.5-stats.html
+208 −0		antd-mobile@2.0.0-alpha.12-stats.html
+208 −0		antd-mobile@2.0.0-alpha.13-stats.html