如何基于Props变更动态禁用react-native-draggable-flatlist的拖拽功能

No worries, the react-native-draggable-flatlist component has a built-in prop made exactly for this scenario: the disabled prop. You can dynamically bind this prop to a state value or an incoming prop to toggle drag functionality on the fly.

Here's how to adjust your existing code to make this work:

1. Track drag status with state or props
   If you're controlling this from a parent component, use an incoming prop like isDragDisabled. If managing it locally, add a state variable to your component:

   constructor(props) {
     super(props);
     this.state = {
       data: [], // Your existing data array
       isDragDisabled: false // Track whether drag is enabled
     };
   }
   

2. Bind the disabled prop to your state/prop
   Update your DraggableFlatList to include the disabled prop, linking it to your status tracker:

   <DraggableFlatList
     scrollPercent={5}
     data={this.state.data}
     renderItem={this.renderItem}
     keyExtractor={(item: any) => `draggable-item-${item}`}
     onMoveEnd={({ data }: any) => { this.setState({ data }) }}
     disabled={this.state.isDragDisabled} // Add this line to control drag
   />
   

3. Toggle the drag status when needed
   Whenever you need to enable/disable dragging (e.g., when a prop updates or a user triggers an action), update your state:

   // Example: Toggle drag with a button press
   toggleDrag = () => {
     this.setState(prevState => ({
       isDragDisabled: !prevState.isDragDisabled
     }));
   }
   
   // If syncing with a parent prop:
   componentDidUpdate(prevProps) {
     if (prevProps.isDragDisabled !== this.props.isDragDisabled) {
       this.setState({ isDragDisabled: this.props.isDragDisabled });
     }
   }
   

Bonus: Disable drag for individual items #

If you ever need to lock specific items instead of the whole list, pass a dragDisabled flag to individual items in your renderItem function:

renderItem = ({ item, drag, isActive }) => (
  <TouchableOpacity
    onLongPress={drag}
    disabled={item.isDragDisabled} // Disable drag for this specific item
  >
    {/* Your item content goes here */}
  </TouchableOpacity>
);

This setup will let you dynamically toggle drag functionality based on prop or state changes smoothly.

内容的提问来源于stack exchange，提问作者Saikat Saha