探索React Native Menu:一款高效易用的移动端菜单库
warning:
这篇文章距离上次修改已过190天,其中的内容可能已经有所变动。
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Menu = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>主菜单</Text>
<View style={styles.menuItems}>
<Text style={styles.menuItem}>设置</Text>
<Text style={styles.menuItem}>关于</Text>
<Text style={styles.menuItem}>退出</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 20,
marginBottom: 10,
},
menuItems: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '100%',
},
menuItem: {
fontSize: 18,
padding: 10,
}
});
export default Menu;
这个代码示例展示了如何在React Native应用中创建一个简单的菜单组件。它使用了View
和Text
组件来构建用户界面,并通过StyleSheet.create
定义了样式,使得菜单项的布局和样式更加直观和易于维护。
评论已关闭