8

在我用 NativeBase 构建的 react native 应用的 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
  }
}

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

4

4 回答 4

7

width: '100%' react native 支持，它将占用其父宽度的 100% 。

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

于 2017-08-31T13:20:33.040 回答
2

尝试添加这种风格：

container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: $mainColor,
   flexDirection: 'row' // <--- Add this line
}
于 2019-06-12T19:21:58.717 回答
0

除了上述建议，您还可以使用“Toggle Inspector”来获取样式属性。但我也发现在开发过程中反应原生应用程序有时会卡在以前的状态。尝试卸载并重新安装它。

于 2018-02-03T11:52:20.707 回答
-2

尝试使用维度。

 import { Dimensions } from 'react-native';

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

那么你可以使用like

  <Form style={{width:width}}>
于 2017-08-31T12:00:57.320 回答