视图未显示

Question

i wanted to create a colored divider under the text but it does not show up on the screen and i don't know why

I'm using expo with react native

image

the divider should appear under text

return (
    <View style={styles.container}>
<Image style={styles.img} source={logo}/>
<Text style={styles.txt}>Vos informations</Text>
<View style={styles.divider} />

    </View>

and this is the Stylesheet i used:

const styles = StyleSheet.create({
    container :{
         flex:1,
         flexDirection:'column',
         alignItems:'center',
         justifyContent:'center'
    },



    img: {
        width: 300, 
        height:100, 
        resizeMode : 'contain',

    }, 
    txt : {
        fontFamily: 'Cairo', 
        fontSize:24, 
    
    },
    divider :{
        backgroundColor : '#FB8703',
        width:'80%',
        height:29,
     
    }


})

the desired outcome is having a wide divider under text

Answer 1

You can add a colored underline to a React Native component by adding a borderBottom style property. For example:

const styles = {
  underline: {
    borderBottomColor: '#00FF00',
    borderBottomWidth: 1,
  },
};

<Text style={styles.underline}>This text has an underline</Text>