我是该领域的新手，想要学习使用 React Native 编码来开发移动应用程序。我想使用 React Native 开发一个联系人列表在主页上我放了一个 (+) 按钮来切换/打开...
我是该领域的新手，想学习使用 React native 编码来开发移动应用程序。
我想用 React Native 开发一个联系人列表在主页上，我放了一个 (+) 按钮来切换/打开带有文本输入框的模态框，并放了一个提交按钮来关闭。将我的文本输入放入输入框（姓名、电子邮件和电话）后，单击提交按钮，模态框关闭，但文本输入对象数据未出现在主页中。我想将文本输入对象数据带到主页，使用数组函数作为总联系人列表，我尝试通过模态文本输入传递对象数据。
模态框已正确关闭，但文本输入对象数据未传递到我想要获取的主页。我尝试将我的代码粘贴到这里，但系统每次都不接受并给出错误。
AddContactOne.js
import { Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useState } from 'react'
import Input from '../../components/Input'
const AddContactOne = () => {
const [name, setName] = useState([]);
const [email, setEmail] = useState([]);
const [phone, setPhone] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const toggleModal = () => { setModalVisible(!modalVisible); };
return (
<View style={styles.container}>
<Text style={styles.txt1}>Contact List</Text>
<TouchableOpacity
onPress={(v) => toggleModal(v)}
style={{
height: 50,
width: 50,
backgroundColor: 'white',
position: 'absolute',
bottom: 30,
right: 30,
borderRadius: 30,
shadowColor: 'black',
elevation: 8,
alignItems: 'center',
justifyContent: 'center'
}}>
<Image
source={{
uri: 'https://cdn-icons-png.flaticon.com/128/748/748113.png',
}}
style={{
height: 30,
width: 30,
}}
/>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={toggleModal}>
<View
style={{
height: 320,
width: '85%',
borderRadius: 10,
alignSelf: 'center',
alignContent: 'center',
justifyContent: 'center',
marginTop: 150,
backgroundColor: "blue",
}}>
<Text style={styles.txt2}>Add Contact</Text>
<Input
value={name}
placeholder={'Enter Name'}
placeholderTextColor={'white'}
marginTop={10}
onChangeText={v => setName(v)}
/>
<Input
value={email}
placeholder={'Enter Email'}
placeholderTextColor={'white'}
marginTop={10}
onChangeText={v => setEmail(v)}
/>
<Input
value={phone}
placeholder={'Enter Phone Number'}
placeholderTextColor={'white'}
marginTop={10}
onChangeText={v => setPhone(v)}
/>
<TouchableOpacity
style={{
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
height: 50,
margin: 20,
borderRadius: 10,
}}
// onPress= {() => {
// setModalVisible(false)
// props?.navigation?.navigate('AddContactOne', {
// name: name,
// email: email,
// phone: phone
// })}
// }
onPress={toggleModal}
name={(v) => setName(v)}
email={(v) => setEmail(v)}
phone={(v) => setPhone(v)}
>
<Text style={{
color: 'black',
fontSize: 20,
}}>Submit</Text>
</TouchableOpacity>
</View>
</Modal>
</TouchableOpacity>
</View>
)
}
export default AddContactOne
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
width: '100%',
alignContent: 'center',
alignItems: 'center',
marginTop: 20,
},
txt1: {
fontSize: 25,
fontWeight: '400'
},
txt2: {
fontSize: 20,
fontWeight: '350',
textAlign: 'center',
marginBottom: 6
}
})
App.js
import { SafeAreaView } from 'react-native'
import React from 'react'
import Task from './src/screens/main/Task';
import AddContact from './src/screens/main/AddContact';
import AddContactOne from './src/screens/main/AddContactOne';
import AddContactTwo from './src/screens/main/AddContactTwo';
const App = () => {
return (
// <Welcome />
// <SignUp/>
// <Task/>
// <AddContact/>
<AddContactOne/>
// <AddContactTwo/>
)
}
export default App