在react native (hook)中传递JSON数据到下一页

Question

我正在学习反应。我用的是钩子函数。没有json数据翻转使用钩子函数的例子，所以我留下一个问题。

我想传递group_id, json数据之一，到下一页。

function HomeScreen({navigation, route}) {
const [loading, setLoading] = useState(true);
const [localItem, setLocalItem] = useState([]);
useEffect(() => {
fetch("http://103.51.240.53:8000/GetBestSeller")
.then((response) => response.json())
.then((localItem) => {
setLocalItem(localItem)
setLoading(false)
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
// ADD THIS THROW error
throw error;
});
})

<FlatList style={{backgroundColor:'block', opacity: 1}}
horizontal={true}
data={localItem}
renderItem={({item, index}) => 
<TouchableOpacity 
onPress={()=>navigation.navigate('Hot', itemID: item.group_id)}
style={{marginLeft: 10, alignItems: 'center', marginRight:10}}>

<View style={{width: '100%', backgroundColor: '#02ad94', opacity: 0.5}}></View>
<Text style={{color: 'white', fontWeight: 'bold', fontSize:25, marginTop: 20}}>{item.name}</Text>
</TouchableOpacity>
}
keyExtractor={item => item.group_id}>
</FlatList>

这是第一页。

const Hot = ({route}) => {
const { itemId }          = route.params;
const { otherParam }      = route.params;
return (
<View>
<Text style={styles.carouselText}>{itemID: item.group_id}</Text>
</View>
)
}

这是第二页

我试着用"navigation绕过它。导航('热点'，itemID: item.group_id)"但是没有成功。

Answer 1

我不认为navigation.navigate('Hot', itemID: item.group_id)是有效的javascript语法

改为try -

navigation.navigate('Hot', {itemID: item.group_id})

javascript对象被包装在{}

react导航文档中有一个例子正好涵盖了这一点。——链接