React-native 为什么菜单不呈现

Question

我有一个平面列表的每个项目的菜单，但是当我按下按钮显示菜单时，当我记录菜单的可见状态时没有任何反应，我看到它被设置为 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);

Answer 1

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

由于visible不在数据中，所以不会重新渲染。

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

更多详情here

React-native 为什么菜单不呈现

React-native Why Menu is not rendering

react-native

react-native-android

react-hooks