长按 Flatlist 中的项目时更改状态（功能组件）

Question

我有两个不同的功能组件；一个呈现平面列表 (Grid)，另一个呈现在 Flatlists renderItem (Item) 中。 Grid 有一个叫做 FanMenuState 的状态，当 flatlist 中的一个项目被 longPressed 时，我将如何改变状态？我到处都找过了，似乎找不到解决办法

function Grid ({data, title}){
 
  const [fanMenuState, setFanMenuState] = React.useState(false);

    return(
        <View style={styles.voltyGrid}>
                  <FlatList
                    showsVerticalScrollIndicator ={false}
                    ListHeaderComponent={()=>
                    <View style={styles.Underline}> 
                      <Text style={styles.introText}>{title}</Text>
                    </View>
                    }
                    numColumns={1}
                    contentContainerStyle={styles.voltyItem}
                    data={data}
                    renderItem={({item}) => <Item title={item.title} thumbnail={item.thumbnail}/>}
                    keyExtractor={item => item.id}
                    scrollEnabled={!fanMenuState}
                    
                  />
                </View>      
    )
}

这是 Flatlist 中呈现的第二个函数 Item。

function Item({ title, thumbnail}) {

    handleLongPress = (event) => {
        
        const posY = event.nativeEvent.pageY;
        const posX = event.nativeEvent.pageX;
        console.log(posX)
        //fanMenu(posY, posX)

      };

return(
    <TouchableOpacity  onLongPress={event => handleLongPress(event)}>


            <View style={styles.container}>

            <View style={styles.thumbnail}>
            <Image style={styles.thumbnail} source={{uri: thumbnail}}/> 
            </View>

            <View style={styles.info}>

                <View style={styles.authorContainer}>
                        <Text style={styles.source}>James Dean</Text>
                        <Text style={styles.length}>4 mins</Text>
                </View>

                <View>
                        <Text style={styles.title}>{ title }</Text>
                        <Text style={styles.description}>This is the description which could be quite long and explains the content like really long</Text>
                </View>  

                <View style={styles.controlBar}>

                        <TouchableOpacity style={styles.controlBarItem}>
                            <Image style={styles.controlBarItemIcon} source={require('../../Resources/Icons/Like/likeIcon.png')}/>
                            <Text style={styles.controlBarItemText} >0</Text>
                        </TouchableOpacity>

                        <TouchableOpacity style={styles.controlBarItem}>
                            <Image style={styles.controlBarItemIcon} source={require('../../Resources/Icons/Comment/Comment.png')}/>
                            <Text style={styles.controlBarItemText} >0</Text>
                        </TouchableOpacity>

                        <TouchableOpacity style={styles.controlBarItem}>
                            <Image style={styles.controlBarItemIcon} source={require('../../Resources/Icons/Share/Share.png')}/>
                            <Text style={styles.controlBarItemText} >0</Text>
                        </TouchableOpacity>

                </View>

            </View>
            </View>

     

    </TouchableOpacity>
    
);
}

非常感谢任何帮助！如果您需要更多信息，请询问 :)

Answer 1

试试这个方法

function Grid ({data, title}){
 
  const [fanMenuState, setFanMenuState] = React.useState(false);

  const onChangeState = (data) => {
     console.log(data);
     fanMenuState(…); // change state here …
  }

   return(
        <View style={styles.voltyGrid}>
          <FlatList
             ……            
             renderItem={({item}) => 
              <Item 
                title={item.title} 
                thumbnail={item.thumbnail} 
                onChangeState={onChangeState} //set prop `onChangeState` callback here
              />
             }
            ……
         />
       </View>      
    )
}


// Item.js
function Item({ title, thumbnail, onChangeState}) {

    const handleLongPress = (event) => {
        
        const posY = event.nativeEvent.pageY;
        const posX = event.nativeEvent.pageX;
        console.log(posX);
        //fanMenu(posY, posX)

        // call here  like
        const data = { posX , posX }
        onChangeState(data);

    };

    return(
      <TouchableOpacity  onLongPress={event => handleLongPress(event)}>
      …..
      </TouchableOpacity>
    
    );
}

长按 Flatlist 中的项目时更改状态（功能组件）

Change State when item in Flatlist is long pressed (Functional Components)

reactjs

react-native

react-native-ios