#javascript #react-native #react-navigation #react-native-elements #buttongroup
#javascript #react-native #react-навигация #react-native-elements #buttongroup
Вопрос:
Я пытался понять, что я здесь делаю не так, и я просто не могу. У меня есть два экрана, на которых я извлекаю данные из своей базы данных и нажимаю на элемент (категорию). Затем этот элемент (категория) извлекает больше данных из моей базы данных при нажатии определенного слова. У меня есть два варианта для пользователя на экране Viewcategory. Либо они могут нажать стрелку назад, чтобы вернуться назад и выбрать другие элементы из другой категории, либо они могут нажать кнопку далее, и она перенесет их на другой экран. Проблема, с которой я сталкиваюсь, заключается в том, что я нажимаю стрелку назад и возвращаюсь, чтобы выбрать другую категорию. Как только эта категория выбрана, следующая кнопка исчезает. Она не появится снова, если я не перезагружу весь свой проект.
Вот первое меню экрана
constructor(props) {
super(props);
this.state = {
restaurantlocationcode: '',
dataSource: [],
}
this.updateIndex = this.updateIndex.bind(this)
}
updateIndex (selectedIndex) {
this.setState({selectedIndex})
this.viewMenu(selectedIndex)
}
render() {
const buttons = ['Menu']
const { selectedIndex } = this.state
return (
<View style={styles.container}>
<MenuButtonWS navigation={this.props.navigation} />
<Input
style={styles.Input}
placeholder='Restaurant Location Code'
leftIcon={
<Icon
name='location-arrow'
size={24}
color='black'
/>
}
onChangeText={ (restaurantlocationcode) => this.setState({restaurantlocationcode})}
value={this.state.restaurantlocationcode}
underlineColorAndroid='transparent'
/>
<ButtonGroup
onPress={this.updateIndex}
selectedIndex={selectedIndex}
selectedButtonStyle={{backgroundColor: 'blue'}}
buttons={buttons}
containerStyle={styles.buttonGroup}
/>
<FlatList
data={this.state.dataSource}
extraData={this.state}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => (
<ListItem
titleStyle={{ color: 'black', fontWeight: 'bold'}}
title={`${item}`}
onPress={() => this.viewCategory(item)}
bottomDivider
chevron
/>
)}
/>
</View>
)
}
viewMenu = (index) => {
if (index === 0) {
let rlc = {
restaurantlocationcode: this.state.restaurantlocationcode,
};
fetch('URL', {
method: 'POST',
body: JSON.stringify(rlc),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
dataSource: responseJson,
});
console.log(responseJson)
})
.catch((error) => {
console.log(error);
});
}
}
viewCategory = (item) => {
fetch('URL', {
method: 'POST',
body: JSON.stringify({
category: item,
restaurantlocationcode: this.state.restaurantlocationcode,
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => response.text())
.then((responseJson) => {
this.setState({
dataSource: responseJson,
});
console.log(responseJson)
this.setState({dataSource: []})
this.props.navigation.navigate('ViewCategoryWS', {
food: responseJson,
otherParam: '101',
});
})
.catch((error) => {
console.log(error);
});
}
} Вот экран, на котором вы можете просмотреть элементы в каждой категории (экран Viewcategory)
constructor(props) {
super(props);
const { navigation } = this.props;
const cust = navigation.getParam('food', 'No-User');
const other_param = navigation.getParam('otherParam', 'No-User');
const cust1 = JSON.parse(cust);
const data = cust1.map(item => ({label: item, checked: false}));
this.state = {
dataSource: [],
data,
checked: null,
selectedIndex: 2,
}
this.updateIndex = this.updateIndex.bind(this)
}
updateIndex (selectedIndex) {
this.setState({selectedIndex})
this.nextScreen(selectedIndex)
}
render() {
const buttons = ['Next']
const { selectedIndex } = this.state
const {data} = this.state;
console.log(data);
return (
<View style={styles.container}>
<BackButtonWS2 navigation={this.props.navigation} />
<FlatList
data={data}
extraData={this.state}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<CheckBox
center
titleProps={{ color: 'black', fontWeight: 'bold'}}
title={item.label}
iconRight
checked={item.checked}
size={30}
onPress={() => this.onCheck(index, item.label)}
containerStyle={styles.checkBox}
/>
)}
/>
<ButtonGroup
onPress={this.updateIndex}
selectedIndex={selectedIndex}
selectedButtonStyle={{backgroundColor: 'blue'}}
buttons={buttons}
containerStyle={styles.buttonGroup}
/>
</View>
)
}
onCheck = (index, item) => {
let {data} = this.state;
data[index].checked = !data[index].checked;
this.setState({data})
this.state.dataSource.push([item]);
//alert(this.state.dataSource);
console.log(this.state.dataSource);
}
nextScreen = (index, item) => {
if (index === 0) {
this.props.navigation.navigate('UsersBill', {
foodCat: this.state.dataSource,
otherParam: '101',
});
alert(this.state.dataSource);
}
}
} Вот мой код для моей кнопки возврата
_back = () => {
this.props.navigation.navigate('MenuWS', {
food: 'food',
otherParam: '101',
});
}
render() {
return(
<Icon
name='arrow-left'
color="#000000"
size={25}
style={styles.menuIcon}
onPress={() => this._back()}
/>
)
}
} Я попытался использовать функцию возврата, и это просто возвращает меня к главному экрану, а не к экрану, который мне нужен. Я также попытался отправить выбранные параметры обратно на экран меню, чтобы посмотреть, будет ли он просто сброшен, и это не так. Я не совсем уверен, что с этим происходит. Кто-нибудь когда-нибудь сталкивался с этой проблемой раньше?