反应本机 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>

当运行它给出“Touchable child must be native or forward setNativeProps to a native component”，所以我按照建议将图标包装在视图中通过其他帖子：

<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，删除无关的环绕视图，让我们知道它是如何工作的！

反应本机 TouchableHighlight 不工作

React native TouchableHighlight not working

react-native

react-native-android