css - React native, flex 和 width 父元素

Question

使用 react native 和 flex，我这样写:

<View style={[styles.cell_content]}>
    <Text style={[styles.title]}>
        Sexualité et prévention
    </Text>
    ...


const styles = StyleSheet.create({
    cell_content: {
        flex: 1,
    },
    title: {
        backgroundColor: 'yellow'
        borderWidth: 1,
        borderRadius: 2.5,
        marginBottom: 5,
        padding: 5,
    },
})

这是结果:

但我希望黄色背景适应文本，而不是 100%。 如果我为标题 ( <View style={styles.title_container}><Text style={[styles.title]}>...</Text></View> ) 创建容器，这是相同的结果 ...

Answer 1

But I want the yellow background to be adapted to the text, not 100%

你可以包装你的 Text带有 View 的元素, 然后放一个虚拟 Text Text 旁边的元素覆盖剩余的空白空间。

像这样:

<View style={styles.container}>
    <Text style={styles.yourText}>
      Sexualité et prévention
    </Text>
    <Text style={styles.textDummy}/>
</View>

CSS:

  container: {
   flexDirection:"row",
  },
  yourText: {
    backgroundColor:"yellow"
  },
  textDummy: {
    flexGrow:1
  }

结果如下:

---

作为第二种解决方案，您可以添加

 alignSelf: "baseline"

到您的title .像这样:

 title: {
        backgroundColor: 'yellow'
        borderWidth: 1,
        borderRadius: 2.5,
        marginBottom: 5,
        padding: 5,
        alignSelf:"baseline"
    }