web-dev-qa-db-ja.com

React Native？

CSSを使用してコンポーネントを画面に集中化するのは困難です。

私のApp.js：

import { Container } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';

import Screen from './ScreenContainer';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FF6666',
    flex: 1
  }
});

const App = () => (
  <Provider store={store}>
    <Container style={styles.container}>
      <Screen />
    </Container>
  </Provider>
);

export default App;

今、私のScreenContainer.js

import { Container, Content, Form, Input, Label, Item } from 'native-base';
import React from 'react';

import AppLogo from '../components/AppLogo';

const Screen = () => (
  <Container>
    <Content>
      <AppLogo />
      <Form>
        <Item floatingLabel last>
          <Label>Username</Label>
          <Input />
        </Item>
      </Form>
    </Content>
  </Container>
);

export default Screen;

このコードにより、次の画面が表示されます。

enter image description here

しかし、私は画面がこの形式のままであることを望みます：

enter image description here

次のコードを変更すると：

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: '#FF6666',
    flex: 1
  }
});

私のアプリはこの画面を返します：

enter image description here

cssreactjsreact-nativeflexboxreact-native-android
6
FabianoLothor

完了しました：

import { Container, Content, Form, Input, Label, Item } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';

import AppLogo from '../components/AppLogo';

const styles = StyleSheet.create({
  container: {},
  content: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center'
  },
  form: {
    width: '100%'
  },
  item: {}
});

const Screen = () => (
  <Container style={styles.container}>
    <Content contentContainerStyle={styles.content}>
      <AppLogo />
      <Form style={styles.form}>
        <Item floatingLabel last>
          <Label>Username</Label>
          <Input />
        </Item>
      </Form>
    </Content>
  </Container>
);

export default Screen;
3
FabianoLothor

ReactネイティブドキュメントのLayout with Flexboxページに目を通すことをお勧めします。これにより、探しているものをどのように実現するかについてのより良いアイデアが得られます。

私が参照したReactネイティブFlexboxドキュメントにアクセスできます。 https://facebook.github.io/react-native/docs/flexbox.html

React Nativeでは、コンポーネントはflexboxアルゴリズムを使用してその子のレイアウトを指定できます。 Flexboxは、さまざまな画面サイズで一貫したレイアウトを提供するように設計されています。

CSSスタイルflex: 1;およびalignItems: 'center';を使用して、気づいているかどうかに関係なく、すでにFlexboxを少し使用しています。

解決

React Nativeでは、Flexboxはデフォルトが異なることを除いてWebと同じように機能し、flexDirectionのデフォルトは行ではなく列です。

このため、コンポーネントのスタイルにalignItemsルールを使用して、セカンダリ軸（垂直）に沿った子の配置を決定できます。

次のルールを子要素に追加すると、子要素は画面全体に表示されます。ただし、横長のレイアウトと大きな画面（タブレットなど）にはmax-widthを追加することを検討してください：

childSelector {
    alignItems: stretch;
}

コンテナのコンテンツを水平および垂直の両方に中央揃えするには、次のスタイル設定ルールを適用します。

alignItems: 'center'
justifyContent: 'center'
2
Trent