给我一个简单的RN左中右三栏布局的页面
以下是一个简单的RN左中右三栏布局的页面代码:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#fff',
padding: 20,
},
leftColumn: {
flex: 1,
backgroundColor: '#E5E5E5',
marginRight: 10,
padding: 10,
borderRadius: 10,
},
middleColumn: {
flex: 2,
backgroundColor: '#F5F5F5',
marginRight: 10,
padding: 10,
borderRadius: 10,
},
rightColumn: {
flex: 1,
backgroundColor: '#E5E5E5',
padding: 10,
borderRadius: 10,
},
text: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
marginBottom: 10,
},
});
export default function ThreeColumnLayout() {
return (
<View style={styles.container}>
<View style={styles.leftColumn}>
<Text style={styles.text}>Left Column</Text>
<Text>Content goes here</Text>
</View>
<View style={styles.middleColumn}>
<Text style={styles.text}>Middle Column</Text>
<Text>Content goes here</Text>
</View>
<View style={styles.rightColumn}>
<Text style={styles.text}>Right Column</Text>
<Text>Content goes here</Text>
</View>
</View>
);
}
这个页面使用了flexbox布局,将整个页面分成三列,并在每列中添加了一些文本内容。每个列的样式都通过StyleSheet对象进行定义,可以自由调整样式以达到想要的效果
原文地址: http://www.cveoy.top/t/topic/hpOM 著作权归作者所有。请勿转载和采集!