【React Native】原生组件

原生组件介绍

在 rn 中，View，Text，并不是HTML里的标签。它们都是原生组件，而且正因为是原生组件，所以在 安卓和 IOS 的显示不尽相同。

StatusBar，它是用来控制显示屏幕顶部的电量、网络信息的。

View，可以当成HTML里的div来用，也就是用来布局页面用的。可以用它来包住其他的一些组件。但是View不提供滚动，如果内容超出屏幕范围，就没法显示出来了。

我们现在做一些尝试。在View的下面，再增加一个View。

return里，只返回了一个元素。如果返回了 <></>，叫做Fragments(/ˈfræɡmənts/)，翻译成中文是分段、片段的意思。Fragments，并不是一个视图，也不能给它添加任何样式。利用它，可以在不添加额外节点的情况下，将子元素组合起来，就像它根本不存在一样。

但是，如果不使用空节点，而是使用一个 <View></View> 在最外层进行包裹，页面则会空白。

我的APP为白屏：

在最外层的View上没有任何样式，连宽和高都没有，所以没法显示出来。然后给最外层加一个样式，页面就可以正常展示：

export default function App() {
  return (
    <View style={styles.wrapper}>
      <View style={styles.container}>
        <Text>一个 expo 项目!</Text>
      </View>
      <View style={styles.container}>
        <Text>一行文字</Text> 
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Text组件，里面是用来放文字内容的。和小程序的Text组件很像，但是他们有一些区别：

• 当你在小程序中，写了一段文字。没有用Text组件包裹，它是可以正常显示。
• 而在React Native中，这样做 100% 报错，它这里的文字内容必须放在Text组件里。