react-native 紙按鈕矢量圖標向右浮動

Question

我嘗試用 V 形圖標構建一個 accordeonmenu 我的 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>
        );
    }

有了這個 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',
    },
   
  });

但我無法在右側獲得圖標，文本留在左側。 它總是在旁邊。

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

零食代碼

Answer 2

它非常簡單，只需添加，

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

我們的圖標移到右側