React Native -> 如何修復我的數據顯示方式？

Question

所以我正在開發一個 react-native 應用程序。 基本上我有幾個組件，並且有一個component where I can enter certain data ，比如員工的姓名， then I want that data, upon a button click, to be sent a different component, where the names would be shown 。 所以我實際上通過屏幕發送它們的方式如下：我使用materialBottoTabNavigation並單擊該按鈕后，數據將保存在application's state中，然后將其pushed into an array （實際上是兩個 arrays - 一個用於名字和第二個用於姓氏），在完成所有操作后，將使用 n avigation parameters將其發送到列表組件，然后最后我對它們進行flat list ，但問題是它們出現為： "JohnDoeJohnDoeJohnDoe" ，而我希望它們像Name - LastName ，然后我希望重復它，但將名稱保持在一個之上。 我認為問題在於我並沒有真正正確地使用 FlatList 組件，或者我將 arrays 作為組件的屬性發送給組件，因此以我提到的格式呈現或兩者兼而有之。 我試過直接發送 state，但我不能說應用程序按照我想要的方式運行，列表組件中的所有數據都更改為當前的 state。 我希望它堅持下去。 我已經考慮過使用 redux 並且我正在尋找替代品。 以下是相關代碼：

添加名稱組件：

const firstNameContainer = []
const lastNameContainer = []
const saveNames =(firstNameToSave, lastNameToSave)=>{
  
    firstNameContainer.push(firstNameToSave)
    lastNameContainer.push(lastNameToSave)
  }
export default function addNames({navigation}) {
    const[firstName, setFistName] = useState();
    const[lastName, setLastName] = useState();
  
    return (
      
      <View style={styles.container}>
          <Text>add names screen</Text>
  
          <TextInput
            style={styles.input}
            placeholder='Enter first name'
            multiline={false}
            keyboardType='default'
            onChangeText={firstName=>setNames(firstName)}>
          </TextInput>
  
           <TextInput
            style={styles.inputTranslation}
            placeholder='Enter last name'
            multiline={false}
            keyboardType='default'
            onChangeText={lastName=>setLastName(lastName)}>
          </TextInput> 
          <TouchableOpacity style={styles.submitButton} onPress={()=>saveNames(firstName, lastName)}> 
            <Text style={styles.submitButtonText}>Add Names</Text>
            </TouchableOpacity>
            <Button
                title='Save Names'
                onPress={()=>{
                    navigation.navigate('NamesList', {firstName: firstNameContainer, lastName: lastNameContainer, key: 1})
                }}></Button>

這是我的list component ：

export default function NamesList({route, navigation}){
    const {firstName, lastName} =route.params;
    return(
      <View>
        <FlatList
     
        data={firstName}
        renderItem={({item})=>(
            <TouchableOpacity>
                <Text>{firstName}</Text>
                <Text>{lastName}</Text>
            </TouchableOpacity>)}
        />

      </View>
      
    )
}

Answer 1

我不太明白你想要什么.. 你希望這個名字像 John - Doe John - Doe John - Doe 一樣顯示嗎？ 或者只有一個 John - Doe

我還沒有對此進行測試，但我認為它應該可以工作。

這是添加名稱頁面

 export default const addName=({navigation})=>{ const [firstName,setFirstName] = useState() const [lastName,setLastName] = useState() var names = [] const pushName = (firstName,lastName)=>{ names.push([firstName,lastName]) } return( <View> <TextInput placeHolder='first Name' onChangeText={(firstNameEntered)=>setFirstName(firstNameEntered)}/> <TextInput placeHolder='last Name' onChangeText={(lastNameEntered)=>setLastName(lastNameEntered)}/> <TouchableOpacity onPress={()=>{ pushName(firstName, lastName) navigation.navigate('names',{names:names, key:1}) }}> <Text>Add Names</Text> </TouchableOpacity> </View> ) }

現在是名稱頁面

 export default function NamesList({route, navigation}){ const {names} =route.params; return( <View> <ScrollView> {names && names.map((name)=>{ <TouchableOpacity> <Text>{name[0]} - {name[1]}</Text> </TouchableOpacity> })} </ScrollView> </View> ) }

對不起，如果我犯了一些錯誤，我還沒有跑過這些，而且我對反應和原生反應很陌生

Answer 2

將名稱另存為數組中的 object

const names = []

const saveNames =(firstNameToSave, lastNameToSave)=>{
     names.push({firstName:firstNameToSave,
                 lastName:lastNameToSave}) 
  }

並通過

 <Button
                title='Save Names'
                onPress={()=>{
                    navigation.navigate('NamesList', {namesList: names, key:1})
                }}></Button>

並像這樣顯示

export default function NamesList({route, navigation}){
    const {namesList} =route.params;
    return(
      <View>
        <FlatList
     
        data={namesList}
        renderItem={({item})=>(
            <TouchableOpacity>
                <Text>{item.firstName} - {item.lastName}</Text>
            </TouchableOpacity>)}
        />

      </View>
      
    )
}