css - 反应原生、弹性和宽度父元素

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>）创建容器，这是相同的结果......

标签： cssreactjsreact-native

Answer 1

但我希望黄色背景适应文本，而不是 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"
    }