web-dev-qa-db-ja.com

React Native-iOSでNativeBaseコンポーネントが全幅を占めていない

NativeBaseで構築された私のreactNativeアプリの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%',
    backgroundColor: $mainColor
  },
  footer: {
    width: '100%',
    backgroundColor: $mainColor
  },

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

幅を指定せずにinputsとheaderを追加できるはずであり、Android）のように全幅を占めるはずです。 =指定しない場合は行います。これを引き起こしているプロジェクトの何が問題になっている可能性がありますか？

react-nativereact-native-androidreact-native-iosnative-base
8
user2602079

width: '100%'is react nativeでサポートされており、親の幅の100％を使用します。

あなたの問題はjustifyContent:'center'およびalignItems:'center' の中に styles.container、それらはすべての要素をコンポーネントの中心に配置させています。コンテンツコンポーネントに独特の背景色を追加して、それがどこにあり、どのくらいの幅があるかを確認できます。

5
LFischer

このスタイルを追加してみてください：

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

上記の提案とは別に、「ToggleInspector」を使用してスタイル属性を取得できます。しかし、開発中にReact Nativeアプリが、以前の状態でスタックすることがあることもわかりました。アンインストールして再インストールしてみてください。

0
Arun kumar