8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何使用数组函数从模态输入获取对象数据到主页来制作联系人列表?

sepp2k 1月前

20 0

我是该领域的新手,想要学习使用 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
帖子版权声明 1、本帖标题:如何使用数组函数从模态输入获取对象数据到主页来制作联系人列表?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由sepp2k在本站《list》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: