無法讀取未定義的“導航”的屬性

我正在嘗試使用 reactstack 導航制作堆疊導航器。當按鈕被點擊時，它只出現在詳細資訊螢屏上，頁面的標題是詳細資訊。我還沒有將資料陣列決議到下一個螢屏，它只是嘗試將螢屏導航到詳細資訊螢屏，并收到此錯誤。我是新來的反應。請幫我解決這個問題。

import React from 'react'
import {Button, StyleSheet, ScrollView, Text, View} from 'react-native'
import {useState, useEffect} from 'react'
import axios from 'axios'


const Item = ({id, user_id, title, onPress, navigation}) => {
  
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Id :{id}
            </Text>
            <Text style={styles.text}>User Id :{user_id}
            </Text>
            <Text style={styles.text}>Tittle :{title}
            </Text>
            <View style={styles.container}>
                <Button onPress={() => navigation.navigate('Detail')} title='Detail'></Button>
            </View>
            <View style={styles.line}></View>
        </View>
    )

}


const Berita = () => {
    const [users,
        setUsers] = useState([]);


    useEffect(() => {
        getData();
    }, []);

    const selectItem = (item) => {
        console.log('Selected item: ', item)
    }

    const getData = () => {
        axios
            .get('https://gorest.co.in/public/v1/posts')
            .then(res => {
                console.log('res: ', res);
                setUsers(res.data.data);
            })
    }

    return (
        <ScrollView style={styles.container}>
            {users.map(user => {
                return <Item key={user.id} id={user.id} user_id={user.user_id} title={user.title}/>
            })}
        </ScrollView>

    )
}

export default Berita

const styles = StyleSheet.create({
    container: {
        padding: 15
    },
    text: {
        color: "black",
        marginTop: 5,
        fontStyle: 'italic',
        fontSize: 18,
        fontFamily: 'Arial'
    },
    line: {
        height: 1,
        backgroundColor: 'black',
        marginVertical: 20
    },
    title: {
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
        color: "black"
    },
    tombol: {
        padding: 10
    }

})

這是堆疊螢屏導航器代碼

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const DetailBerita = () => {
    return (
        <Stack.Navigator >
            <Stack.Screen
                name='Berita'
                component={Berita}
                options={{
                headerTitleAlign: 'center'
            }}/>
            <Stack.Screen
                name="Detail"
                component={Detail}
                options={{
                headerTitleAlign: 'center'
            }}/>
        </Stack.Navigator>
    )
}

uj5u.com熱心網友回復：

看起來您正在使用具有不同螢屏名稱的堆疊導航器，但您沒有發送它。如果可能的話，你能不能把那個檔案發過來，我可以更好地幫助你。但是根據我所擁有的，我可以嘗試解釋堆疊導航的作業原理。用這行代碼：

navigation.navigate('Detail')

您指定要導航到名為“Detail”的螢屏，如果要導航到另一個螢屏，則可以將其更改為螢屏名稱。假設您要導航到您的主螢屏，并在您的 Stack.Navigation 組件中將其命名為“Home”。只需將導航更改為以下內容：

navigation.navigate('Home')

uj5u.com熱心網友回復：

發生這種情況是因為navigationprop 被傳遞給Berita組件，而您正在解構Item組件中的屬性而不是在Berita.

所以代碼應該看起來像

...
const Berita = ({ navigation }) => {

// ... 

  return (
    <ScrollView style={styles.container}>
      {users.map(user => {
        return (
          <Item
            key={user.id}
            id={user.id}
            user_id={user.user_id}
            title={user.title}
            navigation={navigation} // Pass navigation
          />
        );
      })}
    </ScrollView>
  );
};

另一種方法是 - 您可以在onPress（Berita）中使用導航并傳遞onPress給Item組件

const Item = ({ id, user_id, title, onPress }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Id :{id}</Text>
      <Text style={styles.text}>User Id :{user_id}</Text>
      <Text style={styles.text}>Tittle :{title}</Text>
      <View style={styles.container}>
        <Button onPress={onPress} title="Detail" />
      </View>
      <View style={styles.line}></View>
    </View>
  );
};

const Berita = ({ navigation }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    getData();
  }, []);

  const selectItem = item => {
    console.log('Selected item: ', item);
  };

  const getData = () => {
    axios.get('https://gorest.co.in/public/v1/posts').then(res => {
      console.log('res: ', res);
      setUsers(res.data.data);
    });
  };

  return (
    <ScrollView style={styles.container}>
      {users.map(user => {
        return (
          <Item
            key={user.id}
            id={user.id}
            user_id={user.user_id}
            title={user.title}
            onPress={() => navigation.navigate('Detail')}
          />
        );
      })}
    </ScrollView>
  );
};

標籤：javascript 反应原生

上一篇：將帶有坐標的標記上傳到Firebase并在ReactNative應用程式上向其他用戶顯示它們

下一篇：如何制作沒有圖示的TabBar？