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 (
    // 
    <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 worldText>
      */}
 
      {/* 文本是以背景图左上角为起始点开始的 */}
      {/* <ImageBackground
        source={require("./assets/icon.png")}
        style={{ width: 200, height: 100 }}
      >
        <Text>hello worldText>
      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 (
//     
//       {/* 方法一 */}
//     {/*  */}
//      {/* 点击事件，输出在终端 */}
 
//        {console.log('123')}} style={styles.textColor}>康康同学，你好啊！
//        {console.log('点击了')}} >今天   天气好晴朗
//       {/* Text不能继承外层View字体样式的，能够继承父级Text组件样式 */}
//       {/* Text可以加事件 */}
//        {console.log('点击了')}} >普通文本节点
//       
//     
//   );
// }
 
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,
  },
});