Проблема с позиционированием элементов на моем экране - PullRequest
Новая
       15

Проблема с позиционированием элементов на моем экране

0 голосов
/ 10 июля 2019

Я новичок в своем родном реагировании, работаю над мобильным приложением, и у меня есть экран, который является компонентом многократного использования.Он состоит из логотипа, изображения и другого компонента многократного использования.Я хотел бы иметь его в фиксированном положении: логотип сверху, изображение в центре и компонент внизу.Я завернул все в компонент SafeAreView с помощью forceInset = {{bottom: 'never'}}, и все в порядке, за исключением компонента, который, кажется, зафиксирован наверху.Я схожу с ума.

Я поэкспериментировал с пробелом justifyContent между двумя обертками в одном контейнере и компонентом в другом 

import TextContainer from './TextBottomContainer';

export default class Screen extends React.Component {
  static navigationOptions = {
    header: null
  };

  render() {
    return (
      <SafeAreaView style={styles.SAV} forceInset={{ bottom: 'never' }}>
        <View style={{ justifyContent: 'center' }}>
          <View style={styles.container}>
            <Image
              style={styles.logo}
              source={require('../../assets/logo.png')}
            />
            <Image style={styles.img} source={this.props.mainImage} />
          </View>
          <TextContainer
            title={this.props.textTitleBottom}
            content={this.props.textContentBottom}
          />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  SAV: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: 'yellow'
  },
  container: {
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  logo: {
    width: 181,
    height: 64,
    marginTop: 60,
    resizeMode: 'contain'
  },
  img: {
    width: 247,
    height: 192,
    resizeMode: 'contain',
    marginTop: 137
  }
});

Мне нужен экран: логотип, изображение, TextContainer.Что у меня есть: TextContainer, за ним логотип и под ним изображение.

...