view 组件相当于 HTML 中的 div 元素,主要是容器组件。view 容器中是不允许有字符串的。
Text 组件相当于 HTML 中的 P 元素,主要是负责展示文本信息的。
具体实例如下:
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
设置view容器
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
textStyle: {
backgroundColor: "#EEE",
padding: 20,
},
});
在 React Native 中默认的按钮是不能设置样式的,需要设置样式的话需要我们自己实现自定义按钮。具体实例如下:
import { Button } from "@rneui/base";
import { StyleSheet, View } from "react-native";
export default function App() {
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
btnStyle: {
backgroundColor: "#EEE",
fontSize: 30,
fontWeight: "bold",
},
});
在 React Native 中 TextInput 主要是属于表单的输入框,具体实例如下:
export default function App() {
const [name, setName] = useState("");
const [age, setAge] = useState(0);
return (
用户信息:姓名{name},年龄:{age}
表单输入框
姓名:
setName(val)}
/>
年龄:
setAge(+val)}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
padding: 20,
},
formItem: {
width: "100%",
},
formTitle: {
width: 100,
},
inputItem: {
borderWidth: 3,
borderColor: "#eee",
borderRadius: 3,
},
});
ScollView 组件是用于列表滚动组件,因为在 React Native 中,列表很长的时候,终端设备并不会自动添加滚动的行为,所以我们需要 ScollView 这类组件来实现滚动行为添加。
FlatList 组件跟 ScrollView 组件一样可以滚动查看长列表的内容,但是 FlatList 并不是一次性展示列表的所有内容,它是通过一定算法展示可见部分数据,从性能上比 ScrollView 要好。
具体实例如下:
import { StyleSheet, View, Text, ScrollView } from "react-native";
type Persion = {
id: number;
name: string;
age: number;
};
export default function App() {
const persions = [
{ id: 1, name: "张伟", age: 12 },
{ id: 2, name: "王薇", age: 13 },
{ id: 3, name: "李薇", age: 23 },
{ id: 4, name: "那莉", age: 21 },
{ id: 5, name: "强利", age: 11 },
{ id: 6, name: "汪雷", age: 8 },
{ id: 7, name: "王莉", age: 11 },
];
return (
{persions.map((item: Persion) => {
return (
姓名:{item.name} 年龄:{item.age}
);
})}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
padding: 20,
},
listBox: {
margin: 30,
},
item: {
padding: 20,
backgroundColor: "pink",
fontSize: 20,
fontWeight: "bold",
},
});
import { StyleSheet, View, Text, ScrollView, FlatList } from "react-native";
export default function App() {
const persions = [
{ id: 1, name: "张伟", age: 12 },
{ id: 2, name: "王薇", age: 13 },
{ id: 3, name: "李薇", age: 23 },
{ id: 4, name: "那莉", age: 21 },
{ id: 5, name: "强利", age: 11 },
{ id: 6, name: "汪雷", age: 8 },
{ id: 7, name: "王莉", age: 11 },
];
return (
(
姓名:{item.name} 年龄:{item.age}
)}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
padding: 20,
},
listBox: {},
item: {
padding: 20,
backgroundColor: "pink",
fontSize: 20,
fontWeight: "bold",
margin: 30,
},
});
Alert 类似于 HTML 的 aler 弹出框,具体语法如下:
Alert.alert(标题, 显示内容, 按钮区(类型为数组))
TouchableWithoutFeedback 主要是监听空白区的点击事件。
Keyboard 主要是收起和展开软键盘。