阵营本地TouchableHighlight不工作

Question

我试图建立一个登录页面，使用此代码：

<View style={styles.formContainer}> 
    <TouchableHighlight onPress={this.props.authentication}> 
     <Icon.Button name="facebook" style={styles.loginIconButton}> 
      <Text style={styles.loginButtonText}>Login with Facebook</Text> 
     </Icon.Button> 
    </TouchableHighlight> 
</View> 

运行此它给“ 可触摸的孩子必须是本地或转发setNativeProps到本地组件”时

，所以我包图标在视图中，作为建议的其他职位：

<TouchableHighlight onPress={this.props.authentication.bind(this)}> 
    <View> 
     <Icon.Button name="facebook" style={styles.loginIconButton}> 
      <Text style={styles.loginButtonText}>Login with Facebook</Text> 
     </Icon.Button> 
    </View> 
</TouchableHighlight> 

现在在新闻发布会不会被触发了。但是，如果我删除Icon.Button标签，并保持文本，它工作正常。我该如何解决这个布局？

Answer 1

为什么不尝试摆脱外部TouchableHighlight，只需将onPress事件添加到Icon.Button？

如果你看看能否Icon.Button这里的代码（我猜你使用react-native-vector-icons），实际上你可以看到，它创建了一个TouchableHighlight元素作为元素固有的一部分：https://github.com/oblador/react-native-vector-icons/blob/master/lib/icon-button.js

尝试将onPress移动到Icon.Button，删除多余的包装视图，并让我们知道它是如何工作的！