reactjs react-本机纸按钮矢量-图标向右浮动

xpcnnkqh 于 2022-12-26 发布在 React

关注(0)|答案(2)|浏览(120)

我尝试建立一个带有V形图标的可折叠菜单，我的标题按钮有以下代码：

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

但我不能得到的图标在这rigth边和文本停留在左边.它alwayse直接旁边.

reactjs

来源：https://stackoverflow.com/questions/62871130/react-native-paper-button-vector-icons-float-right

2条答案

按热度按时间

ao218c7q1#

更新

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

赞(0）回复(0）举报 2022-12-26

g2ieeal72#

它非常简单，只需添加，

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

我们的图标移到右边

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs react-本机纸按钮矢量-图标向右浮动

2条答案

相关问题

热门标签

最新问答