react-native-elements 搜索栏将“取消”字符串设置为图标

问题描述

我想用一个图标（请参阅底部的代码）替换搜索栏按钮上的“取消”文本（请参阅底部的屏幕截图）。 这是具有默认道具的渲染部分：

render() {
        const _a = this.props,{ theme,cancelButtonProps,cancelButtonTitle,clearIcon,containerStyle,leftIconContainerStyle,rightIconContainerStyle,inputContainerStyle,inputStyle,placeholderTextColor,showLoading,loadingProps,searchIcon,showCancel } = _a,attributes = __rest(_a,["theme","cancelButtonProps","cancelButtonTitle","clearIcon","containerStyle","leftIconContainerStyle","rightIconContainerStyle","inputContainerStyle","inputStyle","placeholderTextColor","showLoading","loadingProps","searchIcon","showCancel"]);
        const { hasFocus,isEmpty } = this.state;
        const { style: loadingStyle } = loadingProps,otherLoadingProps = __rest(loadingProps,["style"]);
        const { buttonStyle,buttonTextStyle,color: buttonColor,disabled: buttondisabled,buttondisabledStyle,buttondisabledTextStyle } = cancelButtonProps,otherCancelButtonProps = __rest(cancelButtonProps,["buttonStyle","buttonTextStyle","color","disabled","buttondisabledStyle","buttondisabledTextStyle"]);
        return (<View style={StyleSheet.flatten([
                styles.container,{ backgroundColor: theme.colors.white },])}>
        <Input testID="searchInput" renderErrorMessage={false} {...attributes} onFocus={this.onFocus} onBlur={this.onBlur} onChangeText={this.onChangeText} ref={(input) => {
                this.input = input;
            }} inputStyle={StyleSheet.flatten([styles.input,inputStyle])} containerStyle={{
                paddingHorizontal: 0,}} inputContainerStyle={StyleSheet.flatten([
                styles.inputContainer,{ backgroundColor: theme.colors.platform.ios.searchBg },hasFocus && { marginRight: this.state.cancelButtonWidth },])} leftIcon={renderNode(Icon,defaultSearchIcon(theme))} leftIconContainerStyle={StyleSheet.flatten([
                styles.leftIconContainerStyle,])} placeholderTextColor={placeholderTextColor || theme.colors.platform.ios.grey} rightIcon={<View style={{ flexDirection: 'row' }}>
              {showLoading && (<ActivityIndicator key="loading" style={StyleSheet.flatten([{ marginRight: 5 },loadingStyle])} {...otherLoadingProps}/>)}
              {!isEmpty &&
                    renderNode(Icon,Object.assign(Object.assign({},defaultClearIcon(theme)),{ key: 'cancel',onPress: this.clear }))}
            </View>} rightIconContainerStyle={StyleSheet.flatten([
                styles.rightIconContainerStyle,])}/>

        <View style={StyleSheet.flatten([
                styles.cancelButtonContainer,{
                    opacity: this.state.cancelButtonWidth === null ? 0 : 1,right: hasFocus ? 0 : -this.state.cancelButtonWidth,},])} onLayout={(event) => this.setState({ cancelButtonWidth: event.nativeEvent.layout.width })}>
          <TouchableOpacity accessibilityRole="button" onPress={this.cancel} disabled={buttondisabled} {...otherCancelButtonProps}>
            <View style={[buttonStyle,buttondisabled && buttondisabledStyle]}>
              <Text style={[
                styles.buttonTextStyle,buttonColor && { color: buttonColor },buttondisabled &&
                    (buttondisabledTextStyle || styles.buttonTextdisabled),]}>
                {cancelButtonTitle}
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>);
    }
}
SearchBar.defaultProps = {
    value: '',cancelButtonTitle: 'Cancel',loadingProps: {},cancelButtonProps: {},showLoading: false,onClear: () => null,onCancel: () => null,onFocus: () => null,onBlur: () => null,onChangeText: () => null,searchIcon: { name: 'ios-search' },clearIcon: { name: 'ios-close-circle' },showCancel: false,};

它看起来像这样：

现在我想用一个图标替换这个“取消”：

const defaultCancelIcon = (theme) => ({
    type: 'material',size: 25,color: theme?.colors?.platform?.android?.grey,name: 'arrow-back',});

由于我还没有使用编辑过的 react-native-elements，所以我真的不知道该怎么做。我试图改变 defaultProps，但它没有改变任何东西。我该怎么做？

解决方法

类型

<YourIconName />

而不是“取消”，例如

SearchBar.defaultProps = {
    value: '',cancelButtonTitle: <YourIconName />,loadingProps: {},...
};

我觉得应该可以