当前位置：首页 > news >正文

React Native 亲切的组件们(函数式组件/class组件)和陌生的样式

news 2025/7/6 14:28:03

写多了taro, 看见react native中的组件好亲切啊，几乎一模一样。

一、函数式组件 — 常用

1）无状态，每次刷新都是生成一个新的状态
2）基于状态变化的管理
3）简洁，代码少，易于服用

import React from "react";
import { View, Text } from 'react-native';// 子组件 TestFunctionDemo.js
export default function TestFunctionDemo(props) {const { name, info: {age, sex} } = propsconst [address, setAddress] = useState('中国')useEffect(() => {// 第一次加载完成setTimeout(() => {setAddress('大陆')}, 2000)}, [])useEffect(() => {// 监听address}, [address])return (<View style={{height: 200, width: '80%', padding: 20, borderRadius: 10, backgroundColor: '#ccc'}}><Text>我是子组件</Text><Text>姓名：{ name }</Text><Text>年龄：{ age }</Text><Text>性别：{ sex }</Text><Text>{`地址：${ address }`}</Text>{ props.children}</View>)
}// 简写
const TestFunctionDemo = (props) => {// ...
}
export default TestFunctionDemo// 或
export default (props) => {// ...
}

二、class组件

1）有状态state, 每次都是修改的同一个状态
2）基于生命周期的管理

// 子组件 TestClassDemo .js
class TestClassDemo extends React.Component {constructor(props) {super(props)this.state = {address: '中国'}}componentDidMount() {setTimeout(() => {this.setState({address: '大陆'})}, 2000)}render() {const { name, info: {age, sex} } = this.propsconst { address } = this.statereturn (<View style={{height: 200, width: '80%', padding: 20, borderRadius: 10, backgroundColor: '#ccc'}}><Text>我是子组件</Text><Text>姓名：{ name }</Text><Text>年龄：{ age }</Text><Text>性别：{ sex }</Text><Text>{`地址：${ address }`}</Text>{ this.props.children}</View>)}
}export default TestClassDemo

三、父组件引入

// 父组件app.js中引入
import TestFunctionDemo from './src/components/TestFunctionDemo';
import TestClassDemofrom './src/components/TestClassDemo';// ...
const info = {age: 20,sex: 'nan'
}// ...<TestFunctionDemo name="zhangsan" info={info}><Text>我是通过插槽加入的！</Text>
</TestFunctionDemo><TestClassDemo name="zhangsan" info={info}><Text>我是通过插槽加入的！</Text>
</TestClassDemo>

在这里插入图片描述
以上是不是和react一模一样

四、样式

！！！这里和react不一样

import React from "react";
import { View, Text, StyleSheet } from 'react-native';// 子组件 TestFunctionDemo.js
export default (props) => {// ...return (<View style={styles.box}>// 多个样式用数组<Text style={[styles.textLine, styles.title]}>我是子组件</Text><Text  style={styles.textLine}>姓名：{ name }</Text>// ...</View>)
}// 样式
const styles = StyleSheet.create({box: {height: 200, width: '80%', padding: 20, borderRadius: 10, backgroundColor: '#ccc'},textLine: {fontSize: 18,color: 'blue'},title: {fontWeight: "bold"}
})