图标旁边的 FlatList 中的中心文本 - React Native
Center Text in FlatList next to Icon - React Native
我目前正在尝试将 FlatList 中的文本居中。
通过居中我的意思是我希望它在中间,每个图标的右边。
目前是这样显示的,在底部。我只是想让它高一点:
这是我的组件的样子:
我尝试实现几种样式,但仍然没有成功。
我想到但没有尝试的是对每一行进行硬编码并放弃循环,但我不确定这样做是否正确。
import SocialIcon from 'react-native-vector-icons/AntDesign';
import BookingIcon from 'react-native-vector-icons/FontAwesome';
import FeatherIcons from 'react-native-vector-icons/Feather';
export const bookIcon = (<BookingIcon name="pencil-square-o" size={40} color="purple" />);
export const calendarIcon = (<SocialIcon name="calendar" size={40} color="purple" />);
export const questionIcon = (<SocialIcon name="questioncircleo" size={40} color="purple" />);
export const externalLinkIcon = (<FeatherIcons name="external-link" size={40} color="purple" />);
class AboutMe extends Component {
static navigationOptions = {
title: "About Me",
}
render() {
return (
<View style={styles.container}>
<View style={styles.topBox}>
<View style={styles.circleOuter} />
<View style={styles.circle} />
</View>
<View style={styles.middleBox}>
</View>
<View style={styles.bottomBox}>
<FlatList
contentContainerStyle={styles.listItem}
data={[
{key: 'Book a free appointment', page:'Book', icon: bookIcon},
{key: 'Availability', page:'Availability', icon:calendarIcon},
{key: 'FAQ', page:'Faq', icon: questionIcon},
{key: 'Useful Links', page: 'Links', icon: externalLinkIcon},
]}
onPress={() => this.props.navigation.navigate('Book')}
renderItem={({item}) => {
return (
<TouchableHighlight onPress={() => this.props.navigation.navigate(`${item.page}`)}>
<Text >{item.icon}{item.key}</Text>
</TouchableHighlight>
)
}}
/>
</View>
</View>
);
};
};
const styles = StyleSheet.create({
container: {
flex: 1
},
topBox: {
flex:3,
backgroundColor: 'red',
justifyContent:'center',
alignItems: 'center'
},
middleBox: {
flex:1,
backgroundColor: 'yellow'
},
bottomBox: {
flex:4,
backgroundColor: 'orange',
padding: 20
},
circle: {
width: 160,
height: 160,
borderRadius: 160/2,
backgroundColor: 'green',
position: 'absolute'
},
circleOuter: {
width: 180,
height: 180,
borderRadius: 180/2,
backgroundColor: 'black'
},
listItem: {
flex:1,
justifyContent: 'center'
},
text: {
fontSize: 20,
}
});
您需要将文本标签包裹在 View/TouchableHighlight
标签中,然后将文本标签垂直居中。试试这个,让我知道。可能有必要将图标包装在单独的图像标签中。如果代码 avode 不起作用意味着需要分隔标签,请告诉我!
<TouchableHighlight
style={styles.buttonsStyle}
onPress={() => this.props.navigation.navigate(`${item.page}`)}
>
<Text>{item.icon}{item.key}</Text>
</TouchableHighlight>
...
...
...
//in the styles add
buttonsStyle:{
justifyContent: 'center',
}
EDIT1
为了包装图标,应该如下所示。请注意,在这种情况下您不能使用 TouchableHighlight
。这似乎是 react-native 的一个错误。我也用过 TouchableOpacity
renderItem={({item}) => {
return (
<TouchableOpacity
style={styles.buttonsStyle}
onPress={() => this.props.navigation.navigate(`${item.page}`)}
>
<Image style={styles.imgStyles} source={item.icon} />
<Text style={styles.mappedTextStyle}>{item.key}</Text>
</TouchableOpacity>
)
}}
样式到 change/add
buttonsStyle:{
alignItems: 'center',
flexDirection:'row',
marginTop: 5,
},
imgStyles:{
width: 40,
height: 40,
marginRight: 10
},
mappedTextStyle: {
fontSize: 18,
color: 'black'
},
编辑 2
为了涵盖矢量图标库,我创建了一个 Expo 小吃来产生所需的行为。世博小吃也有问题的预期解决方案Expo Snack
我目前正在尝试将 FlatList 中的文本居中。 通过居中我的意思是我希望它在中间,每个图标的右边。
目前是这样显示的,在底部。我只是想让它高一点:
这是我的组件的样子: 我尝试实现几种样式,但仍然没有成功。 我想到但没有尝试的是对每一行进行硬编码并放弃循环,但我不确定这样做是否正确。
import SocialIcon from 'react-native-vector-icons/AntDesign';
import BookingIcon from 'react-native-vector-icons/FontAwesome';
import FeatherIcons from 'react-native-vector-icons/Feather';
export const bookIcon = (<BookingIcon name="pencil-square-o" size={40} color="purple" />);
export const calendarIcon = (<SocialIcon name="calendar" size={40} color="purple" />);
export const questionIcon = (<SocialIcon name="questioncircleo" size={40} color="purple" />);
export const externalLinkIcon = (<FeatherIcons name="external-link" size={40} color="purple" />);
class AboutMe extends Component {
static navigationOptions = {
title: "About Me",
}
render() {
return (
<View style={styles.container}>
<View style={styles.topBox}>
<View style={styles.circleOuter} />
<View style={styles.circle} />
</View>
<View style={styles.middleBox}>
</View>
<View style={styles.bottomBox}>
<FlatList
contentContainerStyle={styles.listItem}
data={[
{key: 'Book a free appointment', page:'Book', icon: bookIcon},
{key: 'Availability', page:'Availability', icon:calendarIcon},
{key: 'FAQ', page:'Faq', icon: questionIcon},
{key: 'Useful Links', page: 'Links', icon: externalLinkIcon},
]}
onPress={() => this.props.navigation.navigate('Book')}
renderItem={({item}) => {
return (
<TouchableHighlight onPress={() => this.props.navigation.navigate(`${item.page}`)}>
<Text >{item.icon}{item.key}</Text>
</TouchableHighlight>
)
}}
/>
</View>
</View>
);
};
};
const styles = StyleSheet.create({
container: {
flex: 1
},
topBox: {
flex:3,
backgroundColor: 'red',
justifyContent:'center',
alignItems: 'center'
},
middleBox: {
flex:1,
backgroundColor: 'yellow'
},
bottomBox: {
flex:4,
backgroundColor: 'orange',
padding: 20
},
circle: {
width: 160,
height: 160,
borderRadius: 160/2,
backgroundColor: 'green',
position: 'absolute'
},
circleOuter: {
width: 180,
height: 180,
borderRadius: 180/2,
backgroundColor: 'black'
},
listItem: {
flex:1,
justifyContent: 'center'
},
text: {
fontSize: 20,
}
});
您需要将文本标签包裹在 View/TouchableHighlight
标签中,然后将文本标签垂直居中。试试这个,让我知道。可能有必要将图标包装在单独的图像标签中。如果代码 avode 不起作用意味着需要分隔标签,请告诉我!
<TouchableHighlight
style={styles.buttonsStyle}
onPress={() => this.props.navigation.navigate(`${item.page}`)}
>
<Text>{item.icon}{item.key}</Text>
</TouchableHighlight>
...
...
...
//in the styles add
buttonsStyle:{
justifyContent: 'center',
}
EDIT1
为了包装图标,应该如下所示。请注意,在这种情况下您不能使用 TouchableHighlight
。这似乎是 react-native 的一个错误。我也用过 TouchableOpacity
renderItem={({item}) => {
return (
<TouchableOpacity
style={styles.buttonsStyle}
onPress={() => this.props.navigation.navigate(`${item.page}`)}
>
<Image style={styles.imgStyles} source={item.icon} />
<Text style={styles.mappedTextStyle}>{item.key}</Text>
</TouchableOpacity>
)
}}
样式到 change/add
buttonsStyle:{
alignItems: 'center',
flexDirection:'row',
marginTop: 5,
},
imgStyles:{
width: 40,
height: 40,
marginRight: 10
},
mappedTextStyle: {
fontSize: 18,
color: 'black'
},
编辑 2
为了涵盖矢量图标库,我创建了一个 Expo 小吃来产生所需的行为。世博小吃也有问题的预期解决方案Expo Snack