React Native入门之路：掌握基础组件，构建移动应用

2024-02-17 14:13:57

1. 认识View

在React Native中，View是一个容器组件，类似于HTML中的div标签。它可以容纳其他组件，并可以设置样式。View的常见属性包括：

style: 一个对象，用于设置组件的样式。
children: 一个数组，用于包含其他组件。

import { View, Text } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, World!</Text>
    </View>
  );
};

这段代码创建一个简单的React Native应用，其中包含一个View组件和一个Text组件。View组件设置了样式，使它在屏幕上占据整个空间并垂直居中。Text组件则包含了文本内容“Hello, World!”。

2. 认识Text

Text组件用于在React Native应用中显示文本。Text的常见属性包括：

style: 一个对象，用于设置组件的样式。
children: 一个字符串或一个数组，用于包含要显示的文本。

import { View, Text } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Hello, World!</Text>
    </View>
  );
};