react-native 纸质按钮矢量图标向右浮动

Question

我尝试使用 V 形图标构建一个手风琴菜单，我的 headerbutton 具有以下代码：const AccordeonHeader = (Props) => {        return(            <View style={[accordionStyles.header]}>                    <Button                        contentStyle={[accordionStyles.header__button, ]}                        color='black'                        onPress={() => {show !== Props.value ? setShow(Props.value) : setShow(false)}}                    >                           <Text                            style={[accordionStyles.header__text, styles.headline__h2]}                        >                            {Props.label}                        </Text>                                                    <Icon                             iconStyle={[accordionStyles.header__icon,]}                             name={show === Props.value ? "chevron-up" : "chevron-down"}                        >                        </Icon>                                                                 </Button>                </View>        );    }用这种风格const accordionStyles = StyleSheet.create({    header: {    },    header__button: {        width:'100%',        borderColor:'green',        borderWidth:2,        flexDirection:'row',        justifyContent:'space-between',    },    header__text: {        display:'none',        color:'black',    },    header__icon: {        alignSelf:'flex-end',        color:'black',    },     });但我无法获得右侧的图标，而文字留在左侧。它总是直接在旁边。

Answer 1

更新

import * as React from 'react';

import { Text, View, StyleSheet ,Button,TouchableOpacity} from 'react-native';

import Constants from 'expo-constants';

import FontAwesome from "react-native-vector-icons/FontAwesome";

export default function App() {

  return (

    <TouchableOpacity style={[accordionStyles.header]} onPress={()=>console.log("press")}>        

          <Text style={{paddingTop:5}}>Sortieren</Text>

          <FontAwesome

            iconStyle={[accordionStyles.header__icon]}

            size={30}

            color="#000000" 

            name={"chevron-up"}

          />        

      </TouchableOpacity>

  );

}

const accordionStyles = StyleSheet.create({

  header: { 

    width: "100%",

  borderColor: "green",

  borderWidth: 2,

  flexDirection: "row",

  justifyContent: "space-between"},  

  header__icon: {

    alignSelf: "flex-end",

    color: "black"

  }

});

零食代码