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() {&nbsp; return (&nbsp; &nbsp; <TouchableOpacity style={[accordionStyles.header]} onPress={()=>console.log("press")}>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={{paddingTop:5}}>Sortieren</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FontAwesome&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconStyle={[accordionStyles.header__icon]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size={30}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="#000000"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name={"chevron-up"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; );}const accordionStyles = StyleSheet.create({&nbsp; header: {&nbsp;&nbsp; &nbsp; width: "100%",&nbsp; borderColor: "green",&nbsp; borderWidth: 2,&nbsp; flexDirection: "row",&nbsp; justifyContent: "space-between"},&nbsp;&nbsp;&nbsp; header__icon: {&nbsp; &nbsp; alignSelf: "flex-end",&nbsp; &nbsp; color: "black"&nbsp; }});零食代码