Hybrid混合应用开发: 移动互联网开发方向,《Hybrid混合应用开发》课程仓库
打开这个网站:Expo Documentation
npx create-expo-app expo-app
cd expo-app
npm start(如果这个执行不了,就执行下面一行)
npx expo start
无类名,无id,所有组件里面只能写行内样式
一段代码示例 App.js
// import { StatusBar } from 'expo-status-bar';
import { StatusBar, StyleSheet, Text, View } from 'react-native';
// native中的布局元素默认就是弹性盒
// 不需要再去设置display:flex
// 弹性盒的主轴方向和web端是相反的,纵向
// View不能加onPress事件的
export default function App() {
return (
<View style={styles.container}>
{/* 方法一 */}
{/* <View style={styles.container}> */}
{/* 点击事件,输出在终端 */}
<Text onPress={() => {console.log('123')}} style={styles.textColor}>康康同学,你好啊!</Text>
<Text onPress={() => {console.log('点击了')}} >今天 天气好晴朗</Text>
{/* Text不能继承外层View字体样式的,能够继承父级Text组件样式 */}
{/* Text可以加事件 */}
<Text onPress={() => {console.log('点击了')}} >普通文本<Text>节点</Text></Text>
<StatusBar backgroundColor="purple"/>
</View>
);
}
const styles = StyleSheet.create({
container: {
// 方法二:可以注释掉样式
// flex: 1,
backgroundColor: 'pink',
height: 200,
// 注意大写问题
alignItems: 'center',
justifyContent: 'center',
},
textColor: {
color: 'yellow',
fontSize: 40,
},
});
效果展示: