Как центрировать компоненты с помощью Flex в 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;
Этот код приводит к следующему экрану:
Но я хочу, чтобы экран оставался в этом формате:
Когда я меняю код для:
const styles = StyleSheet.create({
container: {
alignItems: 'center',
backgroundColor: '#FF6666',
flex: 1
}
});
Мое приложение возвращает этот экран:
Ty @CollinD, я меняю вопрос
Ответы 4
Вы можете потратить некоторое время на чтение страницы Макет с помощью Flexbox в документации React Native; так как это даст вам лучшее представление о том, как достичь того, что вы ищете.
You can access the React Native Flexbox documentation I referred to at: https://facebook.github.io/react-native/docs/flexbox.html
В React Native компонент может указывать макет своих дочерних элементов с помощью алгоритма flexbox. Flexbox разработан для обеспечения согласованного макета на экранах разных размеров.
Вы уже использовали немного Flexbox, знали вы или нет, со стилями CSS flex: 1; и alignItems: 'center';.
Решение
В React Native Flexbox работает так же, как и в Интернете, за исключением того, что значения по умолчанию другие, а для flexDirection по умолчанию используется столбец, а не строка.
По этой причине мы можем использовать правило alignItems для стиля компонента, чтобы определить выравнивание дочерних элементов по вторичной оси (вертикальной).
Добавление следующего правила к вашим дочерним элементам приведет к тому, что они будут занимать всю ширину экрана; однако рассмотрите возможность добавления max-width для альбомной ориентации и больших экранов (например, планшета):
childSelector {
alignItems: stretch;
}
Чтобы центрировать содержимое контейнера по горизонтали и вертикали, примените следующие правила стилизации:
alignItems: 'center'
justifyContent: 'center'
Я знаю @Trento, проблема в том, что команда alignItems работает не так, как ожидалось. : '(
Проблема не устранена
Извините, ваш вопрос меня смутил. См. Недавно обновленный нижний фрагмент кода с alignItems и justifyContent.
Это сделано:
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;
Самый простой способ:
<View style = {{jusifyContent: "center", alignItems: "center"}}>
<Text>I'm an element</Text>
<Text>I'm another element</Text>
</View>
Свойство css flex значительно упростит нам все задачи по выравниванию. Вы можете использовать class = "row" или можете использовать встроенные стили, такие как style = {{ display: 'flex, justContent: 'center', alignItems: 'center', это идеально выровняет все в центре родительского div.
<div style = {{ display: 'flex', justifyContent: 'center'}}>
<div>Child1</div>
<div>Child2</div>
</div>
К вашему сведению, у вас может быть больше успеха, если потенциальные ответчики поймут этот вопрос, если вы будете использовать более распространенное «центр» / «центрированный» вместо «централизованный» (особенно в заголовке).