Поместите идеальный круг с идеальным выравниванием в View с помощью flex - React Native - PullRequest
Новая
       19

Поместите идеальный круг с идеальным выравниванием в View с помощью flex - React Native

0 голосов
/ 22 мая 2019

Если у меня есть вид с flex: 0,16. Как я могу поместить идеальный круг внутри с вертикальным и горизонтальным выравниванием?

Я хочу поставить круг в желтой части

Я хочу это

enter image description here

enter image description here

<View key={index} style={{flex:1, flexDirection:'column', justifyContent:'center'}}>
    <View style={styles.container}>
        <View style={styles.imgContainer}>
            <View style={styles.imgContainer2}></View>
            {/*<Image style={styles.img} source={{uri: user.featured_image}} resizeMode={'center'}/>*/}
        </View>
        <View style={styles.textContainer} >
            <Text style={styles.name}>{ user.name}</Text>
            <Text style={styles.business_position} numberOfLines={1} >{ user.business_position}</Text>
        </View>
        <TouchableOpacity style={styles.buttonContainer} onPress={()=>this.goUser(user)}>
            <Text style={styles.buttonText}>PROFILE</Text>
        </TouchableOpacity>
    </View>
</View>

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'yellow',
        marginVertical: 20,
        flex: 1,
    },
    imgContainer: {
        flex: 0.167,
        backgroundColor: 'red',
    },
    imgContainer2: {
        flex: 1
    }
})

Действительно, я хочу поставить изображение, но я думаю, что, если я смогу поставить изображение, вот так, поставить изображение там проще всего

...