时间戳

首页 > 解决方案 > React-native 为什么菜单不呈现

react-native - React-native 为什么菜单不呈现

问题描述

我有一个平面列表的每个项目的菜单，但是当我按下按钮显示菜单时，当我记录菜单的可见状态时，我看到它被设置为 true 但它没有呈现。

这是一个使用菜单呈现每个项目的组件 

 const RenderItem =(props)=>{
    return(
    <TouchableOpacity onPress={()=>{}}>
      <View  style={styles.flatitem}>
          <Icon style={styles.pdf} name="file-pdf-o" color="#666"/>
          <Text style={styles.itemtext}>{props.title}</Text>
          <Menu 
          visible={visible}
          {...console.log(visible)}
          anchor={<Button onPress={openMenu} >
             show
          </Button>}
          onDismiss={closeMenu} >
          <Menu.Item icon="pencil-box-outline" onPress={() =>{}} title="Rename" />
          <Menu.Item icon="label-outline" onPress={() => {}} title="Label" />
          <Menu.Item icon="delete-outline" onPress={() => {}} title="Delete" />  
         </Menu>  
      </View>
    </TouchableOpacity> )}

这是平面列表：

  <FlatList style={styles.flatstyle}
              keyExtractor={(item)=>item['id']}
              data={DATA}
              renderItem={({item})=>(<RenderItem title={item.title }/>)}
              />

这些是打开和关闭功能

 const [visible,setVisible]=useState(false)
 
  const openMenu = () => {
    setVisible(true)
     }
const closeMenu = () => setVisible(false);

标签： react-nativereact-hooksreact-native-android

解决方案

如果我是对的，那实际上不是问题。FlatList 是一个纯组件，只有在 data 属性发生变化时才会重新渲染，即传递给 flatlist 的数据发生变化。

因为visible不在数据中，所以它不会重新渲染。

要使其重新渲染并显示菜单，您需要使用extraDataflatlist 的 prop，这将获取一些其他数据。如果其他数据发生变化，那也将导致重新渲染，并且在您的情况下，其他数据就是visible变量。

更多细节在这里

推荐阅读