@ant-design/react-native/es/search-bar/style/index.js

基于蚂蚁金服移动设计规范的 React Native 组件库

import { StyleSheet } from 'react-native';
export default (function (theme) {
    return StyleSheet.create({
        inputWrapper: {
            flex: 1,
            flexDirection: 'row'
        },
        input: {
            borderRadius: theme.radius_md,
            backgroundColor: '#fff',
            borderColor: theme.border_color_base,
            borderWidth: theme.border_width_sm,
            height: theme.search_bar_input_height,
            color: theme.color_text_base,
            fontSize: theme.font_size_base,
            paddingLeft: theme.h_spacing_lg + theme.icon_size_xxs + theme.h_spacing_sm,
            paddingRight: theme.h_spacing_lg + theme.icon_size_xxs + theme.h_spacing_sm,
            flex: 1,
            paddingTop: 0,
            paddingBottom: 0
        },
        wrapper: {
            backgroundColor: theme.search_bar_fill,
            height: theme.search_bar_height,
            paddingLeft: theme.h_spacing_md,
            paddingRight: theme.h_spacing_md,
            flexDirection: 'row',
            alignItems: 'center'
        },
        cancelTextContainer: {
            height: theme.search_bar_input_height,
            justifyContent: 'center',
            alignItems: 'center'
        },
        cancelText: {
            fontSize: theme.link_button_font_size,
            color: theme.color_link,
            paddingLeft: theme.h_spacing_lg
        },
        search: {
            color: theme.input_color_icon,
            position: 'absolute',
            left: theme.h_spacing_md + 8,
            top: (theme.search_bar_height - theme.icon_size_xxs) / 2,
            fontSize: theme.icon_size_xxs
        }
    });
});