【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组件里。