expo实践

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,

  },
});

效果展示：