невозможно применить flex к импортированному компоненту в стиле - PullRequest
Новая
       4

невозможно применить flex к импортированному компоненту в стиле

0 голосов
/ 08 января 2020

Я импортирую стилизованный компонент в другой компонент и пытаюсь переместить его, поместив его в представление и используя команду flex, чтобы вывести sh в нижнюю часть экрана. Хотя при этом «стилизованный компонент не действует как дочерний элемент представления, в которое я его помещаю. Это ограничивает возможность повторного использования моих стилизованных компонентов. Сейчас я ставлю под сомнение использование стилевых компонентов. 

import React, {useContext} from 'react';
import styled from 'styled-components';
import ThemeContext from '../../../providers/ThemeProvider';
import {TouchableOpacity, Text} from 'react-native';

const Button = styled.TouchableOpacity`
  display: flex;
  height: 50px;
  width: 90%;
  background-color: ${props=> props.theme.primaryColor};
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  margin: auto;
`;

export const AuthButton = props => {
  return (
    <Button onPress={() => props.onPress()}>
      <Text style={{fontSize: 20, color: '#fff'}}>{props.text}</Text>
    </Button>
  );
};




<Wrapper>
        <View style={{borderColor:'lime', borderWidth: 1, flex: 1, justifyContent: 'flex-end'}}>
        <AuthButton text="Logout" onPress={()=> logoutUser()}/>
        </View>
    </Wrapper>

enter image description here

Ответы [ 2 ]

0 голосов
/ 09 января 2020

По какой-либо причине свойства flex не работают для дочерних компонентов, вложенных в тег View, поэтому вместо этого я использую top. 

        <Wrapper style={{flex: 1,borderColor:'lime', borderWidth: 1}}>
          <View style={{top: '85%'}}>
            <AuthButton text="Logout" onPress={()=> logoutUser()}/>
          </View>
        </Wrapper>
0 голосов
/ 08 января 2020

Я не уверен, но вам нужно использовать flexdirection перед justify-content. Пример: 

 <View style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  }}>

в вашем случае вы должны использовать: 

<Wrapper>
        <View style={{borderColor:'lime', borderWidth: 1, flex: 1,  flexDirection: 'row',justifyContent: 'center' }}>
        <AuthButton text="Logout" onPress={()=> logoutUser()}/>
        </View>
    </Wrapper>
...