我的command prompt log就在这里以及a video of the error happening的链接。我在每个文件中添加了console.log("rendered _____ page")以查看它们何时被渲染。
下面我附上了我目前正在处理的项目中的代码。
我有一个似乎正在崩溃应用程序的函数，即_renderPin()函数。它会尝试渲染事件页面，然后停止，直到世博会结束。
我正在使用反应原生，如果我注释掉这个功能的使用，一切都会顺利进行。
该应用程序有一个标签导航器（在添加功能之前它完全正常工作）但是现在当我点击其中包含此代码的标签时会停止。
我对 JS 和 JSX 相当新，我不确定是否存在语法错误或为什么此功能会导致我的应用崩溃。
感谢。
import React, { Component } from 'react';
import {StyleSheet, Text, View, FlatList, ScrollView,
TouchableWithoutFeedback, TouchableOpacity} from 'react-native';
import {CheckBox} from 'react-native-elements';
import {MaterialCommunityIcons} from '@expo/vector-icons'
//Options for checkboxes
const options = ['Show Family Speakers', 'Show Activity Rooms', 'Show Main Stage Shows'];
//Main Class
export default class event extends Component {
//Add title to page
static navigationOptions = ({ navigation }) => {
return {
title: `Big Event`,
}
};
//State variables for data manipulation
state = {
checked: ['Show Family Speakers', 'Show Activity Rooms', 'Show Main Stage Shows'],
pinned: ['Family 1']
};
//Functions for checkboxes and pinning items
checkItem = (item) => {
const { checked } = this.state;
console.log(item);
if (!checked.includes(item)) {
this.setState({ checked: [...checked, item] });
} else {
this.setState({ checked: checked.filter(a => a !== item) });
}
};
pinItem = (item) => {
const { pinned } = this.state;
console.log(item.description);
if (!pinned.includes(item.description)) {
this.setState({ pinned: [...pinned, item.description] });
} else {
this.setState({ pinned: pinned.filter(a => a !== item.description) });
}
};
_renderPin = (item) => {
const{pinned} =this.state;
console.log("Attempt to render pin");
console.log(pinned);
if(pinned && pinned.includes(item.description)){
console.log(item.description,"is pinned");
return(
<TouchableOpacity onPress={this.pinItem(item)}>
<MaterialCommunityIcons name={"pin"} color={"green"}/>
</TouchableOpacity>
);
}else{
console.log(item.description, "is not pinned");
return(
<TouchableOpacity onPress={this.pinItem(item)}>
<MaterialCommunityIcons name={"pin-off"} color={"white"}/>
</TouchableOpacity>
);
}
};
_renderSchedule = (item) => {
const{checked, pinned} =this.state;
console.log("");
console.log("Pinned", pinned);
console.log("Checked", checked);
console.log("");
console.log("");
console.log("Attempt to render item");
if(checked.includes(item.key)){
console.log(item.key," rendered");
return(
<TouchableWithoutFeedback>
<View style = {styles.mainContainer}>
<Text style ={styles.times}>{item.header}</Text>
<View style={styles.roundedRectangle}>
<Text adjustFontSizeToFit style={styles.events}>{item.description}</Text>
{this._renderPin(item)}
</View>
</View>
</TouchableWithoutFeedback>
);
}else{
console.log("Item Does Not Match");
return(
null
);
}
};
/*_renderPinnedSchedule = (item) => {
const{pinned} =this.state;
console.log("Attempt to render item");
if(pinned.includes(item.description)){
console.log(item.description," rendered");
return(
<TouchableWithoutFeedback>
<View style = {styles.mainContainer}>
<Text style ={styles.times}>{item.header}</Text>
<View style={styles.roundedRectangle}>
<Text adjustFontSizeToFit style={styles.events}>{item.description}</Text>
<MaterialCommunityIcons name={"pin"} color={"green"} paddingLeft={40}/>
</View>
</View>
</TouchableWithoutFeedback>
);
}else{
console.log("Item Does Not Match");
return(
null // OR WHATEVER YOU WANT HERE
);
}
};*/
render() {
const { state, navigate } = this.props.navigation;
console.log("render event page");
const schedule =[
{key: 'Show Family Speakers', header: '8:50pm', description: 'Family 1'},
{key: 'Show Main Stage Shows', header: '9:10pm', description: 'Main Event 1'},
{key: 'Show Family Speakers', header: '9:35pm', description: 'Family 2'},
{key: 'Show Main Stage Shows', header: '10:00pm', description: 'Main Event 2'},
{key: 'Show Main Stage Shows', header: '11:00pm', description: 'Main Event 3'},
{key: 'Show Activity Rooms',header: '12:00am', description: 'Activity 1'},
{key: 'Show Main Stage Shows', header: '12:30am', description: 'Main Event 4'},
{key: 'Show Activity Rooms', header: '2:00am', description: 'Activity 2'},
{key: 'Show Main Stage Shows',header: '2:30am', description: 'Main Event 5'},
{key: 'Show Activity Rooms', header: '3:30am', description: 'Activity 3'},
{key: 'Show Family Speakers', header: '4:00am', description: 'Family 3'},
];
return (
<View style = {{flex: 1, paddingTop:30, backgroundColor:'black'}}>
<View>
<FlatList
data = {options}
extraData = {this.state}
keyExtractor ={(item,index)=>index.toString()}
renderItem ={({item}) => (
<View><CheckBox
title={item}
onPress={() => this.checkItem(item)}
checked={this.state.checked.includes(item)}
containerStyle={styles.checkboxes}
textStyle = {styles.optionsText}
/></View>
)}
/>
</View>
<ScrollView>
<FlatList
style={{paddingBottom:50}}
extraData={this.state}
data={schedule}
keyExtractor={(item,index)=>index.toString()}
renderItem = {({item}) => (
<View>
{this._renderSchedule(item)}
</View>
)
}
/>
</ScrollView>
</View>
);
}
};
const styles =StyleSheet.create
({
pin: {
flex:1
},
checkboxes:{
backgroundColor: "black",
borderColor: "black",
height: 8
},
optionsText:{
color: "white"
},
mainContainer: {
flex:3,
flexDirection: 'column',
backgroundColor: 'black'
},
optionHeader: {
height:50,
},
roundedRectangle: {
flexDirection: "row",
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
marginLeft: 30,
marginRight: 30,
backgroundColor: '#3a3a3a',
borderRadius: 10,
borderWidth: 1,
borderColor:"#c4c4c4",
},
events: {
color: "white",
/*color: "#c4c4c4",*/
textAlign: "center",
paddingLeft: 30
},
separator: {
height: 1,
backgroundColor: 'white'
},
times:{
color: "#c4c4c4",
paddingLeft: 30
},
optionsChecked: {
width: 200,
height: 100,
backgroundColor: "white"
},
optionsUnchecked: {
width: 200,
height:100,
backgroundColor: "green"
}
});
`