How to fix height size in react native

Question

我正在使用 React Native Expo，在尝试设置我的查看器的大小时以适应选择菜单和数字输入时遇到错误。

查看代码：

<View style={{ 
  flex: 1,
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: "black",
  width: "100%"
}}>

<SelectList
  setSelected={(val) => setSelected(val)} 
  data={data} 
  save="value"
  placeholder="Produto"
/>
<TextInput
  style={{ width: "50%" }}
  label="Quantia"
  returnKeyType="done"
  value={delivery}
  onChangeText={(text) => setDelivery(text)}
/>
</View>

App Image（黑色背景是为了测试，只是为了知道View占用了多少空间）
https://media.discordapp.net/attachments/873959321376018462/1087615947638050847/Screenshot_20230321-025022_Expo_Go.jpg?width=224&height=473

我该怎么做才能让菜单和输入中的背景变黑？

Answer 1

您正在为整个容器提供 BgColor 属性，因此您需要为包含 TextInput 属性和 SelectList 的 InnerView 提供 bgcolor 样式！

仅此而已，还是您正在寻找任何其他结果？

<View style={{ 
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      width: "100%"
    }}>
<View style={{backgroundColor:'#000'}}>
    <SelectList
      setSelected={(val) => setSelected(val)} 
      data={data} 
      save="value"
      placeholder="Produto"
    />
    <TextInput
      style={{ width: "50%"}}
      label="Quantia"
      returnKeyType="done"
      value={delivery}
      onChangeText={(text) => setDelivery(text)}
    />
    </View>
    </View>

Answer 2

您只需要删除包含

flex: 1

和

View

的

SelectList

上的

TextInput

。

flex

属性定义您的项目如何填充可用空间。您的代码将如下所示：

<View style={{
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: "black",
  width: "100%"
}}>
  <SelectList
    setSelected={(val) => setSelected(val)} 
    data={data} 
    save="value"
    placeholder="Produto"
  />
  <TextInput
    style={{ width: "50%" }}
    label="Quantia"
    returnKeyType="done"
    value={delivery}
    onChangeText={(text) => setDelivery(text)}
  />
</View>

我建议你阅读有关 Layout with FlexBox 的文档。对于这种情况，您可以使用 Flex 部分 中的 Expo Playground 代码示例来查看该属性的工作原理。