React Native - 导航栏中的矢量图标

Question

在我的 React Native 应用程序中，我想使用矢量图标作为导航栏按钮。为此，我正在使用：https://github.com/oblador/react-native-vector-icons 对于导航：https://reactnavigation.org/

我也设法设置了图标，但是当我点击按钮时，我得到了背景变黑的不良效果。有没有办法在按下按钮时也能保持背景颜色透明？

这是我的代码：

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state

    return {
    headerTitle: "Blog posts",
    headerRight: (            
        <Icon.Button name="quote-right" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>            
      ),
    headerLeft: (                                     
        <Icon.Button name="navicon" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>                                                                     
      ),
    };
};

这是我得到的：

Answer 1

您要找的道具是underlayColor，也就是您应该设置为transparent的道具。

<Icon.Button
   name="quote-right"
   backgroundColor="transparent"
   underlayColor="transparent" // This one
   color="black"
   onPress={() => params.postComment()}
>
     <Text style={{fontSize: 15}}></Text>
</Icon.Button>

React Native - 导航栏中的矢量图标

React Native - Vector icons in Navigation bar

react-native

react-navigation

react-native-vector-icons