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