反应原生 TouchableOpacity 不适用于里面的图标

Question

我有一个项目，我想在其中添加一个带有图标“+”的按钮，但是可触摸的不透明度不能作为按钮使用，我单击它，并且不产生不透明度，然后我 console.log() , 查看按钮是否正常工作，只有不透明度反馈是问题，但效果不佳。

这是我的渲染：

render() {
    if (this.props.onNetwork)
        return (<Loader />);

    const navigate = this.props.navigation.navigate;
    const { solicitacoes } = this.props.solicitacoesStore;

    return (
        <View style={styles.container}>

            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <H2 style={styles.header2}>PROJETOS</H2>
              <TouchableOpacity onPress={() => { console.log('puff') }}>
                <Icon style={styles.icon} name='add' />
              </TouchableOpacity>
            </View>
            <Divider color='black'/>

            <ListaItens solicitacoes={solicitacoes} onPress={ this.goToDescritivo }/>
        </View>
    )
}

    const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    paddingHorizontal: metrics.width * 0.05,
    paddingTop: metrics.height * 0.03
},

icon: {
    fontSize: fonts.superbig * 1.5,
    flex:1
},
divider: {
    paddingHorizontal: 10
},
header2: {
    fontWeight: 'bold',
    marginVertical: 5,
    flex: 1
},
});