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

Question

I try to build an accordeonmenu with chevron icons my headerbutton has following code:

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>
        );
    }

with this styles

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',
    },
   
  });

but i can't get the icon on the rigth side and the text stay on the left. its alwayse directly beside.

Answer 1

Update

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"
  }
});

Code on snack

Answer 2

its Very Simple just add,

contentStyle={{flexDirection: 'row-reverse'}}

and our icon moves to right side