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.
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"
}
});
its Very Simple just add,
contentStyle={{flexDirection: 'row-reverse'}}
and our icon moves to right side
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.