react-native - 无法将 flex 应用于导入的样式组件

Question

我将一个样式化的组件导入到另一个组件中，并尝试通过将其放在 View 中并使用 flex 将其推到屏幕底部来移动它。尽管这样做，“样式化组件不像我放置它的 View 的子组件。这限制了我的样式化组件的可重用性。我现在质疑样式化组件的使用。

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>

Answer 1

我不确定，但您需要在 justify-content 之前使用 flexdirection。例子：

 <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>

Answer 2

出于某种原因，flex 属性不适用于嵌套在 View 标记内的子组件，所以我使用 top 代替。

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