Как задать непрозрачность для каждого элемента в виде сетки в React Native?
Я использую react-native-super-grid для просмотра сетки в React Native. Я хочу придать каждому элементу прозрачность, которую можно осязать. Как это сделать. Я хочу переходить на соответствующую страницу при каждом щелчке элемента сетки. Ниже мой код.
render(){
return(
<View style = {{flex: 1}}>
<SuperGridSectionList
itemDimension = {130}
sections = {[
{
title: 'Home Page',
data: [
{ name: 'New Work Request', code: '#8e44ad' }, { name: 'Worker', code: '#2c3e50' },
{ name: 'Report', code: '#f1c40f' }, { name: 'Complaints', code: '#e67e22' },
{ name: 'User', code: '#e74c3c' }
]
},
]}
style = {styles.gridView}
renderItem = {({ item }) => (
<TouchableOpacity onPress = {console.info("clicked")}>
<View style = {[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style = {styles.itemName}>{item.name}</Text>
</View>
</TouchableOpacity>
)}
renderSectionHeader = {({ section }) => (
<Text style = {{ color: 'green' }}>{section.title}</Text>
)}
/>
Когда я нажимаю на элемент в представлении сетки, я хочу перейти на соответствующую страницу. Например: если я нажимаю на New Work Request, я хочу перейти на страницу со списком этого запроса, а для worker я хочу перейти на другую страницу со списком рабочих. . Итак, я хочу написать навигацию в TouchableOpacity. Пользуюсь react-native-router-flux. Итак, <TouchableOpacity onPress = {() => Actions.workRequest} >. Вот так как мне добиться навигации по каждому элементу сетки?
Как выглядит item? Есть ли у него свойство, которое можно использовать в блоке переключателя? I считать то, что вы ищете, - это создать функцию, которая возвращает правильное действие и принимает дискриминатор элемента в качестве параметра, и вы должны передать эту функцию в onPress.
Если я дам id каждому элементу в dataarray как уникальный идентификатор grid item. Как передать это на Actions.firstPage(id:id), а на следующий - на Actions.secondPage(id:id). Не знаю, прав я или нет. Помогите, пожалуйста. Можно ли для элемента в сетке переходить на разные экраны?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Предполагая, что item имеет type или подобное свойство, чтобы различать, куда перейти, что-то вроде этого должно помочь вам хотя бы частично:
const getNavigation = (item) => {
switch (item.type) {
case 'firstPage':
return Actions.firstPage(item.id);
case 'secondPage':
return Actions.secondPage(item.id);
}
}
render() {
// ...
<TouchableOpacity onPress = {() => this.getNavigation(item)}>
// ...
}
Непонятно, в чем именно вопрос.
TouchableOpactiyне работает (т.е.console.infoне появляется)? Вам нужно знать, как заставить работать навигацию? Что-то другое? Что вы видите по сравнению с тем, что вы ожидаете / хотите увидеть?