React-native之组件

状态组件

import { Text, View, StyleSheet } from 'react-native';

import React from 'react';

export default class Index extends React.Component {

state = {

name: '李四',

type: '牛逼',

};

updateState = () => {

const type = this.state.type === '牛逼' ? '帅' : '牛逼';

this.setState({ type });

};

render() {

const { name, type } = this.state;

return (

<View style={styles.container}>

<Text onPress={this.updateState}>名称：{name}</Text>

<Text>特点：{type}</Text>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

margin: 10,

},

});

组件属性 Props

父子组件之间数据传递

import { Text, View, StyleSheet } from 'react-native';

import React from 'react';

class SiteNameComponent extends React.Component{

constructor(props){

super(props)

this.state={name:props.name}

}

//触摸事件

updateState=()=>{

const name=this.state.name=='帅'?'不帅':'帅'

this.setState({name:name})

}

render(){

const {name}=this.state

return (

<View>

<Text onPress={this.updateState}>{name}</Text>

</View>

)

}

}

export default class Index extends React.Component {

render() {

return (

<View style={styles.container}>

<SiteNameComponent name={'帅'}></SiteNameComponent>

</View>

);

}

}

const styles=StyleSheet.create({

container:{

margin:10

}

})

输入组件 TextInput

import { Text, View, StyleSheet, TouchableOpacity, TextInput } from 'react-native';

import React, { Component } from 'react';

export default class Index extends Component {

state = {

email: '',

password: '',

intro: ''

};

handleEmail = (text) => {

this.setState({ email: text });

};

handlePassword = (text) => {

this.setState({ password: text });

};

handleIntro = (text) => {

this.setState({ intro: text });

};

register = () => {

const { email, password, intro } = this.state;

alert(`email: {email}\\npassword: {password}\nintro: ${intro}`);

};

render() {

return (

<View style={styles.container}>

{/* ===== 邮箱输入框 ===== */}

<TextInput

style={styles.input} // 自定义样式

underlineColorAndroid="transparent" // Android 下划线颜色透明

placeholder=" 请输入邮箱 " // 占位提示文字

placeholderTextColor="#ccc" // 占位文字颜色

autoCapitalize="none" // 关闭首字母自动大写

keyboardType="email-address" // 键盘类型：邮箱专用

onChangeText={this.handleEmail} // 文字变化回调

value={this.state.email} // 受控组件：值由 state 驱动

/>

{/* ===== 密码输入框 ===== */}

<TextInput

style={styles.input} // 自定义样式

underlineColorAndroid="transparent" // Android 下划线颜色透明

placeholder=" 请输入密码 " // 占位提示文字

placeholderTextColor="#ccc" // 占位文字颜色

autoCapitalize="none" // 关闭首字母自动大写

keyboardType="default" // 键盘类型：默认键盘

returnKeyType="next" // 软键盘回车键显示为"下一项"

secureTextEntry={true} // 密文输入（密码不可见）

onChangeText={this.handlePassword} // 文字变化回调

value={this.state.password} // 受控组件：值由 state 驱动

/>

{/* ===== 描述输入框（多行） ===== */}

<TextInput

underlineColorAndroid="transparent" // Android 下划线颜色透明

placeholder=" 请输入描述 " // 占位提示文字

placeholderTextColor="#ccc" // 占位文字颜色

autoCapitalize="none" // 关闭首字母自动大写

multiline={true} // 允许多行输入

numberOfLines={4} // 默认显示 4 行高度

textAlignVertical="top" // 文字垂直对齐到顶部（Android）

returnKeyType="next" // 软键盘回车键显示为"下一项"

onChangeText={this.handleIntro} // 文字变化回调

value={this.state.intro} // 受控组件：值由 state 驱动

/>

{/* ===== 注册按钮 ===== */}

<TouchableOpacity

style={styles.submitButton} // 自定义样式

onPress={this.register} // 点击回调：触发注册方法

>

<Text

style={styles.submitButtonText} // 按钮文字样式

>

注册

</Text>

</TouchableOpacity>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

paddingTop: 23

},

input: {

margin: 15,

paddingLeft: 8,

height: 40,

borderColor: '#EEEEEE',

borderWidth: 1

},

submitButton: {

backgroundColor: '#7a42f4',

padding: 10,

alignItems: 'center', // 子元素水平居中

margin: 15,

height: 40,

borderRadius: 5, // 圆角

width: '90%', // 宽度占父容器 90%

alignSelf: 'center' // 自身在父容器中水平居中

},

submitButtonText: {

color: 'white',

fontSize: 16 // 字体大小

}

});

图片组件

import { Text, View, StyleSheet, Image, ScrollView } from 'react-native';

import React from 'react';

export default class Index extends React.Component {

render() {

return (

<ScrollView>

{/* 普通图片设置（修正路径和 require 语法） */}

<Image

style={{ margin: 10, width: 200, height: 200, resizeMode: 'contain', borderWidth: 1, borderColor: '#000' }}

source={require('../assets/images/favicon.png')}

/>

{/* 网络图片设置（修正组件名大小写） */}

<Image

style={{ margin: 10, width: 177, height: 100 }}

source={{ uri: 'https://qhglhh.oss-cn-beijing.aliyuncs.com/05521404-406b-433f-b871-54350f9dd611.png' }}

/>

{/* 图片显示模式：contain（正常等比例缩放） */}

<Image

style={{ margin: 10, width: 200, height: 200, resizeMode: 'contain', borderWidth: 1, borderColor: '#000' }}

source={require('../assets/images/favicon.png')}

/>

{/* 图片显示模式：stretch（覆盖填充，可能变形） */}

<Image

style={{ margin: 10, width: 300, height:300, resizeMode: 'stretch', borderWidth: 1, borderColor: '#000' }}

source={require('../assets/images/favicon.png')}

/>

</ScrollView>

);

}

}

加载组件 - 活动指示器

import React from 'react';

import {

View,

StyleSheet,

ActivityIndicator,

Button

} from 'react-native';

export default class Index extends React.Component {

state = { animating: true };

closeActivityIndicator = () => {

this.setState(prevState => ({ animating: !prevState.animating }));

};

componentDidMount() {

this.closeActivityIndicator();

}

render() {

const { animating } = this.state;

return (

<View style={styles.container}>

<ActivityIndicator

animating={animating}

color="#bc2b78"

size="large"

style={styles.activityIndicator}

/>

<Button

title="切换"

onPress={this.closeActivityIndicator}

/>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

marginTop: 70,

alignItems: 'center',

justifyContent: 'center'

},

activityIndicator: {

height: 80

}

});

弹出框组件

import React from 'react';

import {

Text,

View,

StyleSheet,

Alert,

TouchableOpacity

} from 'react-native';

export default class Index extends React.Component {

showAlert1 = () => {

Alert.alert('弹出框1');

};

showTip = () => {

Alert.alert('删除数据成功');

};

showAlert2 = () => {

Alert.alert(

'警告',

'确定删除？',

{ text: '确认', onPress: this.showTip }, { text: '取消', style: 'cancel' } \], { cancelable: false } ); }; render() { return ( \ \ \确认\ \ \ \取消\ \ \ ); } } const styles = StyleSheet.create({ button: { backgroundColor: '#4ba37b', width: 100, height: 50, borderRadius: 50, justifyContent: 'center', alignItems: 'center', marginTop: 100 } });  **数据存储组件** **-** **AsyncStroage** 需要提前安装组件 yarn add @react-native-async-storage/async-storage 类似于redux，实现跨组件数据共享 import React from 'react'; import { Text, View, StyleSheet, Alert, TouchableOpacity, TouchableHighlight, TextInput } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; export default class Index extends React.Component { state = { name: '李四', // 初始姓名 inputText: '' // 输入框内容（初始化为空更合理） }; // 读取存储的姓名 async readName() { try { const value = await AsyncStorage.getItem('name'); if (value !== null) { this.setState({ name: value }); Alert.alert('提示', '数据读取成功'); } else { Alert.alert('提示', '没有找到保存的数据'); } } catch (e) { console.error('读取失败:', e); Alert.alert('错误', '读取数据失败'); } }; // 保存姓名到本地存储 setName = () =\> { const { inputText } = this.state; if (!inputText.trim()) { // 简单校验空输入 Alert.alert('提示', '请输入要保存的姓名'); return; } AsyncStorage.setItem('name', inputText) // 修复：使用正确的setItem方法 .then(() =\> { this.setState({ name: inputText }); // 保存成功后更新显示 Alert.alert('提示', '保存成功'); }) .catch(e =\> { console.error('保存失败:', e); Alert.alert('错误', '保存数据失败'); }); }; render() { const { name, inputText } = this.state; return ( \ {/\* 输入框：修复value绑定，添加输入监听 \*/} \ this.setState({ inputText: text })} // 实时更新输入状态 /\> {/\* 操作按钮组 \*/} \ \ \保存\ \ \ \读取\ \ \ {/\* 显示当前保存的值 \*/} \ \当前保存的值为：{this.state.name}\ \ \ ); } } const styles = StyleSheet.create({ container: { margin: 16, padding: 12, backgroundColor: '#f5f5f5', borderRadius: 8, }, textInput: { height: 44, borderWidth: 1, borderColor: '#ddd', borderRadius: 4, paddingHorizontal: 8, marginBottom: 12, fontSize: 16, backgroundColor: 'white', }, buttonGroup: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 12, }, button: { flex: 1, // 平分宽度 height: 44, borderRadius: 4, justifyContent: 'center', alignItems: 'center', marginHorizontal: 4, }, saveButton: { backgroundColor: '#ff4444', // 更醒目的红色 }, readButton: { backgroundColor: '#4444ff', // 更醒目的蓝色 }, buttonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, tipContainer: { marginTop: 8, paddingTop: 8, borderTopWidth: 1, borderTopColor: '#eee', fontSize: 14, color: '#666', } });  **动画组件** **-** **Animated** import React from 'react'; import { StyleSheet, TouchableOpacity, Animated } from 'react-native'; export default class Index extends React.Component { constructor(props){ super(props) this.animatedWidth=new Animated.Value(50) this.animatedHeight=new Animated.Value(100) } animatedBox=()=\>{ //点击后，设置动画变化 Animated.timing(this.animatedWidth,{ toValue:200, duration:1000, useNativeDriver: false }).start() Animated.timing(this.animatedHeight,{ toValue:500, duration:500, useNativeDriver: false }).start() } render() { const animatedStyle={ width:this.animatedWidth, height:this.animatedHeight } return ( \ \ \ ); } } const styles=StyleSheet.create({ container:{ justifyContent:'center', alignItems:'center' }, box:{ backgroundColor:'blue', } })  **开关组件** **-** **Switch** import React from 'react'; import { Text, StyleSheet, View, Switch } from 'react-native'; // 补充必要组件导入 export default class Index extends React.Component { constructor() { super(); this.label = { false: '关', true: '开' }; this.state = { switch1Value: true }; } toggleSwitch = (value) =\> { this.setState({ switch1Value: value }); }; render() { return ( \ {/\* 将开关和文本放在同一行容器中 \*/} \ \ {/\* 将状态文本移到Switch外部 \*/} \ Switch当前的状态是：{this.label\[this.state.switch1Value\]} \ \ \ ); } } // 修复StyleSheet创建方法拼写错误 const styles = StyleSheet.create({ container: { margin: 10, padding: 16, backgroundColor: '#fff', }, switchWrapper: { flexDirection: 'row', // 水平排列 alignItems: 'center', // 垂直居中 justifyContent: 'space-between', // 两端对齐 }, statusText: { fontSize: 16, color: '#333', marginLeft: 12, // 与开关的间距 }, });  **状态栏组件** **-** **StatuBar** import React from "react"; import { Text, StyleSheet, View, Switch, StatusBar, TouchableOpacity, } from "react-native"; // 补充必要组件导入 export default class Index extends React.Component { state = { hidden: false, barStyle: "default", }; changeHidden = () =\> { var hidden = this.state.hidden ? false : true; this.setState({ hidden: hidden }); }; changeBarStyle = () =\> { var barStyle =this.state.barStyle == "light-content" ? "dark-content" : "light-content"; this.setState({ barStyle: barStyle }); }; render() { return ( \ \ ); } } const styles=StyleSheet.create({ button:{ backgroundColor:'#4ba37b', width:100, borderRadius:50, alignItems:'center', marginTop:100 } })  **选择器组件** **-** **Picker** import React from "react"; import { Text, StyleSheet, View, } from "react-native"; import {Picker} from '@react-native-picker/picker'; export default class Index extends React.Component { user = \[ { label: "请选择性别", value: "" }, { label: "男", value: "man" }, { label: "女", value: "woman" }, { label: "其他", value: "other" }, \]; state = { user: "" }; updateUser = (user) =\> { this.setState({ user: user }); }; render() { return ( \ \请选择性别\ \ { this.user.map((o,index)=\> \ ) } \ \你的选择是\ \{this.state.user}\ \ ); } } const styles=StyleSheet.create({ container:{ margin:10 }, label:{ fontSize:14, color:'#333333' }, text:{ fontSize:30, alignSelf:'center' } })  **网络请求** import React from "react"; import { Text, StyleSheet, View, Image } from "react-native"; const REQUEST_URL = "[https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json](https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json")"; export default class Index extends React.Component { constructor(props) { super(props); this.state = { movies: null, }; this.fetchData = this.fetchData.bind(this); } componentDidMount() { this.fetchData(); } fetchData() { fetch(REQUEST_URL) .then((response) =\> response.json()) .then((responseData) =\> { this.setState({ movies: responseData.movies, }); }); } render() { if (!this.state.movies) { return this.renderLoadingView(); } const movie = this.state.movies\[0\]; return this.renderMovie(movie); } renderLoadingView() { return ( \ \loading...\ \ ); } renderMovie(movie) { return ( \ \ \ \{movie.title}\ \{movie.year}\ \ \ ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 100, height: 80, }, rightContainer: { flex: 1, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, });