react-native – React Native – NativeBase组件在iOS上不占用

发布时间：2020-12-15 20:30:11 所属栏目：百科来源：网络整理

导读：在使用NativeBase构建的iOS版本的本机应用程序中,除非给出特定的宽度,否则一切都太瘦了.见下图.我给页眉和页脚的宽度为100％,所以它很好,但我没有为输入做到这一点,他们太瘦了.当没有宽度时,页眉和页脚是瘦的. 码： import React from 'react'import { Conta

在使用NativeBase构建的iOS版本的本机应用程序中,除非给出特定的宽度,否则一切都太瘦了.见下图.我给页眉和页脚的宽度为100％,所以它很好,但我没有为输入做到这一点,他们太瘦了.当没有宽度时,页眉和页脚是瘦的.

enter image description here

码：

import React from 'react'
import {
  Container,Header,Form,Item,Input,Label,Content,Footer,FooterTab,Button,Left,Right,Body
} from 'native-base'

import { Text,Image } from 'react-native'

export const Volcalc = () => {
  return (
    <Container style={styles.container}>
      <Header style={styles.header}>
        <Left>
          <Image resizeMode={Image.resizeMode.contain} style={styles.thumbnail} source={require('./img/logo_red_nowords.png')} />

        </Left>
        <Body>
        </Body>
        <Right />
      </Header>

      <Content>

        <Form>
          <Item stackedLabel bordered >
            <Label>height</Label>
            <Input />
          </Item>
          <Item stackedLabel >
            <Label>width</Label>
            <Input />
          </Item>
        </Form>

      </Content>

      <Footer >
        <FooterTab style={styles.footer}>
          <Button full>
            <Text>Footer 1</Text>
          </Button>
        </FooterTab>
      </Footer>
    </Container>
  )
}

const $mainColor = '#00d1b2'
const styles = {
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: $mainColor
  },header: {
    width: '100%',footer: {
    width: '100%',thumbnail: {
    width: 35,height: 35
  }
}

我很确定我应该能够添加输入和标题,而不指定宽度,并且它应该占用像Android那样没有指定的全宽度.我的项目造成这种情况可能有什么问题？

解决方法

width：反应原生支持’100％’,它将占用其父宽度的100％.

我认为你的问题是justifyContent：’center’和alignItems：’center’在styles.container中,它们导致所有元素都在组件的中心.您可以尝试为内容组件添加独特的背景颜色,以查看它的位置和宽度.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!