ReactNative

在expo的项目下：

import {useState} from “react”

//引进需要用的组件：

import {

  StatusBar,

  StyleSheet,

  Text,

  View,

  Image,

  ImageBackground,

  TextInput,

  ScrollView,

  Button,

  TouchableOpacity,

} 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>
  );
}

对应的样式代码：

container: {
    // 第一次课
    // 方法二：可以注释掉样式
    // flex: 1,
    backgroundColor: 'pink',
    height: 200,
    // 注意大写问题
    alignItems: 'center',
    justifyContent: 'center',
  },
  textColor: {
    color: 'yellow',
    fontSize: 40,

  },

第二次课：

// import { StatusBar } from 'expo-status-bar';
import { useState } from "react";
// 在这里引进需要用的组件
import {
  StatusBar,
  StyleSheet,
  Text,
  View,
  Image,
  ImageBackground,
  TextInput,
  ScrollView,
  Button,
  TouchableOpacity,
} from "react-native";

// native中的布局元素默认就是弹性盒
// 不需要再去设置display：flex
// 弹性盒的主轴方向和web端是相反的，纵向
// View不能加onPress事件的
export default function App() {
  const [value, setValue] = useState("");
  return (
    // <View style={styles.container}>
    <ScrollView>
      <TouchableOpacity
        style={{
          backgroundColor: "red",
          height: 100,
          width: 200,
          justifyContent: "center",
          alignItems: "center",
          borderRadius: 50,
        }}
        onPress={() => {
        }}
      ></TouchableOpacity>
      {/* <Button style={{ width: 100, height: 100, backgroundColor: "red" }}></Button> */}

      {/* <Text>{value}</Text>
      <TextInput
        value={value}
        onChangeText={(text) => setValue(text)}
        style={{
          width: 300,
          height: 30,
          borderColor: "red",
          borderWidth: 1,
          borderRadius: 10,
        }}
      ></TextInput> */}

      {/* <Image
      // resizeMode：cover：覆盖；center:居中；repeat：平铺很多个
        style={{ width: 100, height: 100, resizeMode:"center",borderColor: "blue", borderWidth: 1 }}
        source={require("./assets/favicon.png")}
        // 引入网络图片之前需要先设置大小
      />
      <Image
        style={{ width: 100, height: 100, resizeMode:"contain",borderColor: "blue", borderWidth: 1 }}
        source={require("./assets/icon.png")}
        // 引入网络图片之前需要先设置大小
      />
      <Image
      // 左右上下有空白
        resizeMode="contain"
        style={{ width: 200, height: 100, borderColor: "red", borderWidth: 1, position:"absolute" }}
        // 后缀为svg的可能出不来效果
        source={{uri: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"}}
      /> */}

      {/* 布局元素设置了display：flex，position:relative */}
      {/* <Image
        style={{ width: 100, height: 100, position:"absolute" }}
        source={require("./assets/icon.png")}
        // 引入网络图片之前需要先设置大小
      /> 
       <Text>hello world</Text>
      */}

      {/* 文本是以背景图左上角为起始点开始的 */}
      {/* <ImageBackground
        source={require("./assets/icon.png")}
        style={{ width: 200, height: 100 }}
      >
        <Text>hello world</Text>
      </ImageBackground> */}
      {/* 
      <TextInput
        style={{
          borderWidth: 1,
          borderColor: "red",
          width: 300,
          height: 100,
          borderRadius: 10,
          alignSelf: "center",
          margin: 20,
          paddingHorizontal: 20,
        }}
      ></TextInput> */}
      {/* </View> */}
    </ScrollView>
  );
}
// 第一次课
// 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,

  // },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    height: 200,
  },
});