Центрирующий контейнер, но не компоненты внутри контейнера RN

Question

Я применил правильные атрибуты css для центрирования контейнера, но контейнер все еще не центрируется. В частности, justifyContent и alignItems. Я не хочу центрировать материал внутри, а только контейнер. Как я могу этого добиться?

function CardLesson({title, description}){
  return <View style={styles.cardLesson}>
    <LinearGradient
          colors={['rgba(0,0,0,0.1)', 'transparent']}
          style={{
            position: 'absolute',
            left: 0,
            borderRadius: 10,
            right: 0,
            top: 0,
            height: 10,
          }}
        />
    <Text style={styles.title}>{title}</Text>
    <Text>{description}</Text>
  </View>
}

cardLesson: {
    flexDirection: 'column',
    height: '30%',
    borderRadius: 10,
    marginVertical: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'lightblue',
    width: '80%',
  }

введите описание изображения здесь

Answer 1

Измените свой код, как показано ниже, чтобы решить вашу проблему,

function CardLesson({title, description}){
      return <View 
    style={{display:'flex',
    alignItems: 'center',
    justifyContent:'center'
    }}>
    <View style={styles.cardLesson}>
        <LinearGradient
              colors={['rgba(0,0,0,0.1)', 'transparent']}
              style={{
                position: 'absolute',
                left: 0,
                borderRadius: 10,
                right: 0,
                top: 0,
                height: 10,
              }}
            />
        <Text style={styles.title}>{title}</Text>
        <Text>{description}</Text>
      </View>
    </View>
    }
    
    cardLesson: {
        flexDirection: 'column',
        height: '30%',
        borderRadius: 10,
        marginVertical: 10,
        backgroundColor: 'lightblue',
        width: '80%',
      }

Answer 2

Попробуйте добавить это:

cardLesson: {
    flex:1,
    flexDirection: 'column',
    height: '30%',
    borderRadius: 10,
    marginVertical: 10,
    alignSelf: 'center',

    backgroundColor: 'lightblue',
    width: '80%',
  }

Надеюсь, это поможет. не стесняйтесь сомневаться