ant-design-mobile: Custom style with V 2.0.0-alpha.4 doesn't work

What problem does this feature solve?

I tried custom badge style like #1629,but it doesn’t work.

Here’s my test code.

custom.js It says Import badge module has no default module.

import badgeStyle from 'antd-mobile/lib/badge/style/index'

export default {
    ...badgeStyle,
    primaryHighlight: {
        padding: 0,
        backgroundColor: '#fff',
        color: '#f19736',
        // borderStyle: 'solid',
        // borderWidth: 1,
        // borderColor: '#f19736',
    }

}

use space

import React, {Component} from 'react'
import {StyleSheet, View, Button,Text} from 'react-native'
import {List, Flex, Badge} from 'antd-mobile'
import {connect} from 'dva'

import {NavigationActions} from '../utils'
import {customBadge} from '../styles/customBadge'

const Item = List.Item

@connect()
class Account extends Component {

    gotoLogin = () => {
        this.props.dispatch(NavigationActions.navigate({routeName: 'Login'}))
    }

    render() {
        return (

            <View style={styles.container}>
                <List>
                    <Item style={{alignItems: 'center'}} arrow="empty">
                        <Flex justify="center">
                            <Flex>
                                <Badge style={customBadge} text={'陈jie'}/>
                            </Flex>
                        </Flex>
                    </Item>
                </List>
                <Button title="Goto Login" onPress={this.gotoLogin}/>
            </View>
        )
    }
}

package “antd-mobile”: “^2.0.0-alpha.4”, “dva”: “^1.3.0-beta.4”, “expo”: “^19.0.1”, “react”: “16.0.0-alpha.12”,

What does the proposed API look like?

ref #1629

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 19 (8 by maintainers)

Most upvoted comments

@AlberZ1989

import customBadge from '../styles/customBadge'

@paranoidjk 嗯,一时忽略了

@cielu 额,InputItem 哪里有 primaryHighlight 的样式?

只有 container , text , input, extra, errorIcon

https://github.com/ant-design/ant-design-mobile/blob/master/components/input-item/style/index.native.tsx

primaryHighlight 这个只是我举例的 button 里的,你不能直接照抄例子吧

@silentcloud 回归到 Toast ,Toast 如果能自定义出现的位置就好了,,,比如上,中,下。。 可是也被固定在中间了。。。啊 啊啊 啊 ,,强迫症好纠结