推荐:react-native-whatsapp-ui - 创建原生WhatsApp风格的React Native应用
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
const WhatsAppUI = () => {
return (
<View style={styles.container}>
<View style={styles.header}>
<Image source={require('./assets/whatsapp.png')} style={styles.logo} />
<Text style={styles.headerTitle}>WhatsApp</Text>
</View>
<View style={styles.body}>
{/* 在这里放置你的内容 */}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#EBEBEB',
},
header: {
height: 100,
backgroundColor: '#00A35E',
justifyContent: 'center',
alignItems: 'center',
padding: 10,
},
logo: {
width: 60,
height: 60,
resizeMode: 'contain',
},
headerTitle: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
},
body: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default WhatsAppUI;
这个代码实例展示了如何使用React Native创建一个简单的WhatsApp风格界面。它包括一个头部(header),用来展示WhatsApp的logo和标题,以及一个主体部分(body),你可以在其中添加你的内容。代码使用了React Native的组件如View, Text和Image,并通过StyleSheet定义了基本的样式。
评论已关闭