反应本机TouchableHighlight不起作用答案

【问题标题】：React native TouchableHighlight not working反应本机TouchableHighlight不起作用
【发布时间】：2017-04-10 15:39:55
【问题描述】：

我正在尝试使用此代码构建登录页面：

<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>

运行它时，它会给出“Touchable child must be native or forward setNativeProps to an native component”，所以我将 Icon 包装在 View 中，正如其他帖子所建议的那样：

<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>

现在不再触发 on press 事件。但是，如果我删除 Icon.Button 标记并只留下 Text 它可以正常工作。我该如何解决这个布局？

【问题讨论】：

标签： react-native react-native-android

【解决方案1】：

为什么不尝试去掉外部的TouchableHighlight，只将onPress 事件添加到Icon.Button？

如果您在此处查看Icon.Button 的代码（我猜您使用的是react-native-vector-icons），您实际上可以看到它创建了一个TouchableHighlight 元素作为元素的固有部分：@ 987654321@

尝试将onPress 移动到Icon.Button，删除无关的包装视图，并告诉我们它是如何工作的！

【讨论】：

是的，它就像一个魅力 - 应该先查看来源:)