React-本地化身。修复ImageRadius以使所有头像平等

Question

仅在renderItem和FlatList中聚焦。头像是这样显示的。

有些是圆圈，有些是圆角，defaultSource头像是正方形。

似乎找不到解决方案..

我尝试过使用borderRadius作为图像道具，而不是使用inside of the Image样式。

renderItem = ({item}) => (
        <ListItem
            bottomDivider={true}
            Component={TouchableScale}
            friction={90}
            tension={100}
            activeScale={0.95}
            title={item.name}
            titleStyle={styles.titleStyle}
            subtitle={item.email}
            subtitleStyle={styles.subStyle}
            leftAvatar={<Image source={{uri: 'my URL'}}
                               defaultSource={require('../resources/defaultAvatar.png')}
                               style={{width: 45, height: 45, borderRadius: 80}}
                               resizeMode={'contain'}/>}
            onPress={() => this.onUserPress(item)}
            chevronColor="white"
            chevron
        />
    )

    render() {
        const {search} = this.state;
        return (
            <View>
                <SearchBar
                    platform={"ios"}
                    ref={search => this.search = search}
                    placeholder={'Escrever aqui...'}
                    color={'#808080'}
                    onChangeText={this.SearchFilterFunction}
                    value={search}
                    round={true}
                    inputStyle={{fontSize: 16}}
                    inputContainerStyle={{height: 35}}
                    containerStyle={{height: 53}}
                    showLoading={true}
                />
                <FlatList
                    data={this.state.usersFilter.sort((a, b) => a.name.toString().localeCompare(b.name))}
                    renderItem={this.renderItem}
                    keyExtractor={this.keyExtractor}
                />
            </View>
        );
    }

我希望所有的头像都被正确格式化。

我在评论中上传了app print！

Answer 1

import { Platform } from 'react-native';

borderRadius: Platform.OS === 'ios' ? 60 : 100

试试这个，它对我来说很好。