导航到第二个屏幕时，设备上的react本机应用程序停止

Question

我正在react native中开发一个测试应用程序。随着expo-start-web应用程序在浏览器中运行良好。但当我在安卓手机上安装该应用程序并运行该应用程序时，只要我导航到第二个屏幕，它就会停止运行。

有两个屏幕，一个是Products屏幕，另一个是ProductDetails屏幕，由NavigationContainer连接在一起。

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Products from './Products';
import ProductDetails from './ProductDetails';
const Stack = createNativeStackNavigator();
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Products"
component={Products}
options={{
headerTitleAlign: 'center'
}}
/>
<Stack.Screen
name="ProductDetails"
component={ProductDetails}
options={{
headerTitleAlign: 'center'
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
export default App

第一个屏幕是产品。它列出了一堆家具产品。

Products.js

import React, { Component } from 'react'
import { ScrollView, Text, View, TouchableOpacity, StyleSheet, Image } from 'react-native'
import axios from 'axios'
class Products extends Component {
constructor(props) {
super(props);
this.state = {
products: []
};
}
componentDidMount() {
this.GetAllProducts();
}
GetAllProducts() {
let that = this;
axios.get('https://categoriesexpress444.herokuapp.com/getallproducts')
.then(function (response) {
// handle success
that.setState({
products: response.data
});
})
.catch(function (error) {
// handle error
alert(error.message);
});
}
render() {
return (
<View style={{ flex: 1 }}>
<ScrollView>
{
this.state.products.map((item, index) => (
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate('ProductDetails', {
itemId: item.id
})
}
key = {item.id}
style = {styles.container}>
<Text style = {styles.text}>{item.productname}</Text>
<Text>{item.description}</Text>
<Text>€ {item.price}</Text>
<Image source={{ uri: item.picture }} style={{height:120, width:200}}/>
<Text style = {styles.text}>
{item.name}
</Text>
</TouchableOpacity>
))
}
</ScrollView>
</View>
)
}
}
export default Products
const styles = StyleSheet.create ({
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#ffffff',
alignItems: 'center',
cursor: 'none'
},
text: {
color: '#4f603c'
}
})

第二个屏幕详细显示了从第一个屏幕中选择的产品。

ProductDetails.js

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { TouchableOpacity, Image } from 'react-native'
import axios from 'axios'
class ProductDetails extends Component {
constructor(props) {
super(props);
this.state = {
selectedproduct: [],
prodid: 0
};
}

componentDidMount() {
this.setState({
prodid: this.props.route.params.itemId
}, () => {
this.GetSelectedProduct();
});
}
GetSelectedProduct() {
let that = this;
axios.get('https://categoriesexpress444.herokuapp.com/productandalternatives?productid=' + this.state.prodid)
.then(function (response) {
// handle success
that.setState({
selectedproduct: response.data
}, () => {
//alert(JSON.stringify(that.state.selectedproduct, undefined, 2));
});
})
.catch(function (error) {
// handle error
alert(error.message);
});
}
render() {
return (
this.state.selectedproduct.length && (
<View>
{
this.state.selectedproduct.map((item, index) => (
<TouchableOpacity 
key = {item.id} 
style = {styles.container}>
<Text style = {styles.h3}>{item.productname}</Text>
<Text style = {styles.h5}>Product Details</Text>
<Text>Name: {item.productname}</Text>
<Text>Description: {item.description}</Text>
<Text>Price: € {item.price}</Text>
<Text>Picture:</Text>
<Image source={{ uri: item.picture }} style={{height:240, width:400}}/>
</TouchableOpacity>
))
}
</View>
)
)
}
}
export default ProductDetails
const styles = StyleSheet.create ({
h3: {
fontSize : '22pt'
},
h5: {
fontSize : '18pt'
},
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#ffffff',
alignItems: 'center',
cursor: 'none'
}
})

问题存在于第二个屏幕的render((中的任何位置。因为，当我省略<View>和</View>之间的所有代码时，应用程序导航到第二个屏幕没有问题。

我用警报测试了axios.get，它返回了正确的JSON。

Answer 1

仅有少量细微变化

1。fontSize应该像这个fontSize: 22

2.您必须在React中返回一些内容。

3.从API获取数据时始终执行选项链接。

这是解决方案

ProductDetails.js

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { TouchableOpacity, Image, ActivityIndicator } from 'react-native'
import axios from 'axios'
class ProductDetails extends Component {
constructor(props) {
super(props);
this.state = {
selectedproduct: [],
prodid: 0
};
}
componentDidMount() {
this.setState({
prodid: this.props.route.params.itemId
}, () => {
this.GetSelectedProduct();
});
}
GetSelectedProduct() {
let that = this;
axios.get('https://categoriesexpress444.herokuapp.com/productandalternatives?productid=' + this.state.prodid)
.then(function (response) {
// handle success
that.setState({
selectedproduct: response.data
}, () => {
//alert(JSON.stringify(that.state.selectedproduct, undefined, 2));
});
})
.catch(function (error) {
// handle error
alert(error.message);
});
}
render() {
return (
<>
{this.state.selectedproduct?.length ? (
<View>
{
this.state?.selectedproduct?.map((item, index) => (
<TouchableOpacity
key={item?.id}
style={styles.container}>
<Text style={styles.h3}>{item?.productname}</Text>
<Text style={styles.h5}>Product Details</Text>
<Text>Name: {item?.productname}</Text>
<Text>Description: {item?.description}</Text>
<Text>Price: € {item?.price}</Text>
<Text>Picture:</Text>
<Image source={{ uri: item?.picture }} style={{ height: 240, width: 400 }} />
</TouchableOpacity>
))
}
</View>
)
: <View>
<ActivityIndicator />
</View>
}
</>
)
}
}
export default ProductDetails
const styles = StyleSheet.create({
h3: {
fontSize: 22
},
h5: {
fontSize: 18
},
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#ffffff',
alignItems: 'center',
cursor: 'none'
}
})