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

Question

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

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 },
                containerStyle,
            ])}>
        <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 },
                inputContainerStyle,
            ])} leftIcon={renderNode(Icon, searchIcon, defaultSearchIcon(theme))} leftIconContainerStyle={StyleSheet.flatten([
                styles.leftIconContainerStyle,
                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, clearIcon, Object.assign(Object.assign({}, defaultClearIcon(theme)), { key: 'cancel', onPress: this.clear }))}
            </View>} rightIconContainerStyle={StyleSheet.flatten([
                styles.rightIconContainerStyle,
                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 },
                buttonTextStyle,
                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，但它没有改变任何东西。我该怎么做？

Answer 1

类型

<YourIconName />

而不是“取消”，比如

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

我觉得应该可以