React Native：在背景中添加一条颜色带

Question

我想在我的白色背景中间添加一条灰色带。问题是：我不能在里面写任何东西。这是我的代码： container: { flex: 1, justifyContent: "center", marginTop: 12, flexDirection: "column", }, upperContainer: { flex: 1, backgroundColor: "#fff", }, lowerContainer: { flex: 1, top: 1400, backgroundColor: "#F7F7F7", }

      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
        <View style={styles.container}>
          <View style={styles.upperContainer}>
...
          <View style={styles.lowerContainer}>
...

Answer 1

我不确定您要使用 ScrollView 做什么，但这是在静态背景上执行此操作的一种方法：

<View style={{ flex: 1, backgroundColor: '#fff', justifyContent: 'center' }}>
  <View style={{ backgroundColor: '#bbb', width: '100%', paddingVertical: 12 }}>
    <Text style={{ textAlign: 'center' }}>
      Gray Stripe Text
    </Text>
  </View>
</View >

键是：

外部视图中的 flex: 1 和 justifyContent: 'center'
嵌套元素以包含它们

您也可以在没有内部视图的情况下使用灰色背景，方法是直接向文本添加背景色。

React Native：在背景中添加一条颜色带

React Native : Add a band of color in the background

javascript

css

background-color

reactjs

react-native