如何在react native中固定高度大小

t0ybt7op  于 2023-03-24  发布在  React
关注(0)|答案(2)|浏览(210)

我正在使用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
我该怎么做才能只在菜单和输入中使背景变黑?

bybem2ql

bybem2ql1#

你只需要在包含SelectListTextInputView上删除flex: 1。属性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代码示例来查看属性的工作原理。

zd287kbt

zd287kbt2#

你给BgColor属性到整个容器insted你需要给予bgcolor样式到InnerView它持有TextInput属性和SelectList!
仅仅是这样还是你在寻找其他的结果?

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

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

相关问题