TouchableOpacity隱藏一個視圖的內容在onPress

Question

我試圖創建一個按鈕組件，看起來像這樣。

的TouchableOpacity部件包裹一個組件的LinearGradient內。當我觸摸按鈕時，內部視圖的透明度非常低。我明白，這是TouchableOpacity的功能之一，但有沒有辦法禁用它？

我玩道具activeOpacity和focusedOpacity，但它仍然呈現不正確。

下面的代碼

import React from 'react'; 
 
import { 
 
    View, 
 
    Text, 
 
    TouchableOpacity, 
 
    Dimensions 
 
} from 'react-native'; 
 

 
import LinearGradient from 'react-native-linear-gradient'; 
 

 
import em from './../../styles/calculateSize'; 
 

 
const deviceWidth = Dimensions.get('window').width; 
 

 
const GradientButton = ({ propStyle, buttonText, onPress }) => { 
 
    const { centerEverything, buttonGradientStyle, buttonStyle, buttonTextStyle } = styles; 
 
    return (
 
    <LinearGradient colors={['#FF7676', '#F54EA2']} style={[buttonGradientStyle, centerEverything]}> 
 
     <TouchableOpacity 
 
     style={[buttonStyle, centerEverything]} 
 
     activeOpacity={1} 
 
     focusedOpacity={1} 
 
     onPress={onPress}> 
 
     <Text style={buttonTextStyle}>{buttonText}</Text> 
 
     </TouchableOpacity> 
 
    </LinearGradient> 
 
); 
 
} 
 

 
const styles = { 
 
    centerEverything: { 
 
    justifyContent: 'center', 
 
    alignItems: 'center', 
 
    }, 
 
    buttonGradientStyle: { 
 
    height: 27, 
 
    width: deviceWidth * 0.23, 
 
    borderRadius: 5, 
 
    marginLeft: 5 
 
    }, 
 
    buttonStyle: { 
 
    height: 24, 
 
    width: deviceWidth * 0.23 - 3, 
 
    backgroundColor: '#fff', 
 
    opacity: 0.1, 
 
    justifyContent: 'center', 
 
    borderRadius: 3, 
 
    }, 
 
    buttonTextStyle: { 
 
    fontSize: em(0.75), 
 
    color: '#F54EA2', 
 
    backgroundColor: 'transparent', 
 
    } 
 
} 
 

 
export { GradientButton };

Answer 1

好不容易纔發現的什麼，我想在這裏實現了正確的方法，這要歸功於基督教塔克在Facebook的陣營原住民社區。

本質上爲了消除TouchableOpacity呈現的視覺效果，我需要使用TouchableWithoutFeedback，我已經知道它在第一位。

其次，即使我用TouchableWithoutFeedback替換TouchableOpacity，該組件結構仍然會出現錯誤。

• 的LinearGradient
  • TouchableWithoutFeedback

這是正確的做法

return (
 
    <TouchableWithoutFeedback onPress={onPress}> 
 
     <LinearGradient colors={['#FF7676', '#F54EA2']} style={[buttonGradientStyle, centerEverything]}> 
 
     <View style={[buttonStyle, centerEverything]} > 
 
      <Text style={buttonTextStyle}>{buttonText}</Text> 
 
     </View> 
 
     </LinearGradient> 
 
    </TouchableWithoutFeedback> 
 
);