以下是一个简单的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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录