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

Question

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

use*_*079 8 react-native react-native-android native-base react-native-ios

在使用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
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

小智 5

width: '100%' 被支撑在反应过来天然的，这将需要它的父宽度的100％。

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

Answer 2

Sau*_*shi -2

尝试使用尺寸。

 import { Dimensions } from 'react-native';

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

Run Code Online (Sandbox Code Playgroud)

那么你可以使用像

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	7654 次
最近记录：	6 年，2 月前