代码之家 › 专栏 › 技术社区 › Anu

如何在React Native中为网格视图中的每个项提供可触摸的不透明度?

jsx gridview react-native reactjs javascript

Anu · 技术社区 · 6 年前

我在用 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.log("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>
  )}
/>

1 回复 | 直到 6 年前

Colin Young 6 年前

假设 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)}>
  // ...
}

推荐文章

Minchan Jung · 当React中的文本内容更改时,如何更新div

2 年前

niksaexe · 在具有默认图片的情况下,使用onMouseEnter更改React中的img源

2 年前

Berendschot · 将条件类与静态类NextJS相结合

2 年前

Jonas · 反应挂钩-编辑后更新列表中的项目

2 年前

Brian Highforce Thomas · 未能在React中映射属性值。js和Typescript

2 年前

william007 · 使用useRef获取活动背景色

2 年前

jenzhng · 我如何让这个flex容器包装在React中?

2 年前

Demetris · 如何在音频播放器中传递React道具?

2 年前

Dylan L. · 为什么更新的状态没有返回到我的组件?

2 年前

twominds · 鼠标离开元素,鼠标进入另一个元素不会重置状态

2 年前