ui-app收货地址代码
时间: 2024-01-02 11:02:43 浏览: 33
下面是一个简单的UI-APP收货地址代码示例:
```
import React, { useState } from 'react'
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native'
const AddressScreen = () => {
const [name, setName] = useState('')
const [address, setAddress] = useState('')
const [city, setCity] = useState('')
const [state, setState] = useState('')
const [zipCode, setZipCode] = useState('')
const handleSaveAddress = () => {
// 这里可以将收货地址保存到后端或本地存储中
console.log(`Name: ${name}\nAddress: ${address}\nCity: ${city}\nState: ${state}\nZip Code: ${zipCode}`)
}
return (
<View style={styles.container}>
<Text style={styles.title}>Add New Address</Text>
<TextInput
style={styles.input}
placeholder='Full Name'
value={name}
onChangeText={setName}
/>
<TextInput
style={styles.input}
placeholder='Address'
value={address}
onChangeText={setAddress}
/>
<TextInput
style={styles.input}
placeholder='City'
value={city}
onChangeText={setCity}
/>
<TextInput
style={styles.input}
placeholder='State'
value={state}
onChangeText={setState}
/>
<TextInput
style={styles.input}
placeholder='Zip Code'
value={zipCode}
onChangeText={setZipCode}
/>
<TouchableOpacity style={styles.button} onPress={handleSaveAddress}>
<Text style={styles.buttonText}>Save Address</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#fff',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
input: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
padding: 10,
marginBottom: 10,
},
button: {
backgroundColor: '#007bff',
padding: 10,
borderRadius: 5,
marginTop: 10,
},
buttonText: {
color: '#fff',
textAlign: 'center',
fontWeight: 'bold',
},
})
export default AddressScreen
```
这段代码使用了 `useState` hook 来维护输入框的值,并且在保存按钮被点击时,会将所有的输入框的值打印到控制台上。你可以根据实际需求,将收货地址保存到后端或本地存储中。