React Native 样式布局基础知识

作者：System 时间：2024年08月09日分类：所有,react native 字数：669

这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。




import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
const ExampleComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
  },
  text: {
    fontSize: 20,
    color: '#34495e',
  },
});
 
export default ExampleComponent;

这段代码展示了如何在React Native中创建一个简单的组件，该组件使用了Flexbox布局，并包含了样式表。它设置了一个包含文本的视图，文本具有特定的字体大小和颜色，视图则具有背景颜色和居中对齐的属性。这是学习React Native布局和样式的一个很好的起点。

React Native 样式布局基础知识

评论已关闭

推荐阅读