Question

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

代码：

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%',
    backgroundColor: $mainColor
  },
  footer: {
    width: '100%',
    backgroundColor: $mainColor
  },

  thumbnail: {
    width: 35,
    height: 35
  }
}

我很确定我应该能够在不指定宽度的情况下添加input和header，并且它应该像Android那样在未指定时占用整个宽度。我的项目造成这种情况可能有什么问题？

Answer 1

本地反应支持

width: '100%' ，它将占用其父宽度的100％。

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

Answer 2

除上述建议外，您还可以使用＆＃34; Toggle Inspector＆＃34;获取样式属性。但我也发现在开发过程中反应原生应用有时会陷入以前的状态。尝试卸载并重新安装。

Answer 3

尝试添加此样式：

container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: $mainColor,
   flexDirection: 'row' // <--- Add this line
}

Answer 4

尝试使用Dimensions。

 import { Dimensions } from 'react-native';

 var {width} = Dimension.get('window');

然后你可以使用像

  <Form style={{width:width}}>

React Native - NativeBase组件在iOS上不占用全宽

4 个答案: