Question

我正在尝试创建自定义按钮。为此，我将我现有的视图包装到 TouchableHighlight 中（如果不适合，请另外写一下）

<TouchableHighlight onPress={this.freeTimeTapped} underlayColor="white">
    <LabelsView data={this.freeTimeData} 
                containerStyle={{ backgroundColor: '#3A65FF' }} />
</TouchableHighlight>

此代码会抛出错误可触摸的孩子必须是原生的，例如here。所以，我添加了

setNativeProps = (nativeProps) => {
    this._root.setNativeProps(nativeProps);
}

错误消失了，但现在我收到错误

React Native Error：undefined不是对象（评估 '_this._root.setNativeProps'）

触摸后

我做错了什么？

有关LabelsView的更多代码：

export default class LabelsView extends Component {
    // Make TouchableHighlight wrapper work
    setNativeProps = (nativeProps) => {
        this._root.setNativeProps(nativeProps);
    }

    render() {
        return (
            <View style={[styles.container, this.props.containerStyle]}>
                <View style={styles.leftContainer}>
                    <Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
                </View>
                <View style={styles.rightContainer}>
                    <Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
                    <Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
                </View>
            </View>
        );
    }
}

Answer 1

我创建了与你相同的情况，发现你唯一错误的就是你在 TouchableHighlight 中包装了一个类。如果你想将它包装在任何可触摸的组件中，那么本机需要本机子进行反应，所以要解决这个问题，请按如下方式更改你的代码： -

<LabelsView freeTimeTapped={this.freeTimeTapped} data={this.freeTimeData} 
            containerStyle={{ backgroundColor: '#3A65FF' }} />

和您的LabelsView类如下： -

    render() {
    return (
        <TouchableHighlight onPress={this.props.freeTimeTapped} underlayColor="white">
        <View style={[styles.container, this.props.containerStyle]}>
            <View style={styles.leftContainer}>
                <Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
            </View>
            <View style={styles.rightContainer}>
                <Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
                <Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
            </View>
        </View>
      </TouchableHighlight>
    );
}

如果您仍有任何问题，请告诉我：）

如果您想将它放在父级中，只需将代码修改为：

export default class LabelsView extends Component {
    // Make TouchableHighlight wrapper work
    setNativeProps = (nativeProps) => {
        this._root.setNativeProps(nativeProps);
    }

    render() {
        return (
            <View ref={component => this._root = component} style={[styles.container, this.props.containerStyle]}>
                <View style={styles.leftContainer}>
                    <Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
                </View>
                <View style={styles.rightContainer}>
                    <Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
                    <Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
                </View>
            </View>
        );
    }
}

您错过了 ref = {component =＆gt; this._root = component}

React Native Error：undefined不是对象（评估'_this._root.setNativeProps'）

1 个答案: