react-native - 居中容器而不是容器 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

Change your code like below, that solve your issue,

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%',
      }