如何在本机反应中动态更改zIndex？

Posted 2023-02-22

【中文标题】如何在本机反应中动态更改zIndex？

【英文标题】：How to dynamically change zIndex in react native?

【发布时间】：2021-11-22 00:45:02

【问题描述】：

我是 react native 的新手，如何在 react native 中动态更改 Zindex？或者如何使用其他动态方式隐藏/显示？

import  styles  from './App_styles';

 export default function App() 

  return (
    <View style=styles.body>
      
      <Pressable onPress=()=>styles.popup.zIndex=0>
      <View style=styles.popup>
        
      </View>
      </Pressable>

      <View style=styles.main_content>

      </View>

    </View>
  );
  

App_styles：

export const styles = StyleSheet.create(

    body:
        backgroundColor: 'gray',
        height:'100%',
    ,

    popup: 
        position:'absolute',
        backgroundColor: 'rgba(0,0,0, 0.5)',
        height:'100%',
        width:'100%',
        zIndex:1,
        alignSelf:'center',
        marginTop:'30%',
    ,
    
    main_content:
        backgroundColor: 'red',
        width:'100%',
        height:'100%'

    ,
    
);

我不确定如何使用 js 在 react native 中动态更改属性

【问题讨论】：

请先学习基础知识； React 和 React Native 是一样的：reactjs.org/docs/state-and-lifecycle.html

这能回答你的问题吗？ Can I make dynamic styles in React Native?

【参考方案1】：

你可以使用 state 来更新弹窗的样式：

import  styles  from './App_styles';
import useState from 'React';

 export default function App() 

  const [zIndex, setZIndex] = useState(1);

  return (
    <View style=styles.body>
      
      <Pressable onPress=()=>setZIndex(0)>
      <View style=[styles.popup, zIndex: zIndex]>
        
      </View>
      </Pressable>

      <View style=styles.main_content>

      </View>

    </View>
  );
  

【讨论】：

只需将它们链接到文档页面即可，无需在此处发布答案。

@ChrisG 我认为这个答案很好，而且答案与 stylesheet.create 不一样在 react 中不存在所以很多人可能没有意识到你可以在数组中内联样式

@ChrisG 这肯定是个初学者问题

非常感谢，但我有点困惑为什么我们不能直接更改样式的属性？就像在我的代码中我做了styles.popup.zIndex=0 我的意思是如果你不能直接改变css中的值，那么javascript的用途是什么

@cakelover 在 React 中，如果你想要任何 UI 更新，你必须更新状态以使其再次呈现，首先检查 React 的基础知识

【参考方案2】：

只需使用 useState 钩子

  import  styles  from './App_styles';

  export default function App() 
  const [show, setShow] = useState(true)

  return (
   <View style=styles.body>
   show && <View style=styles.popup>
    
  </View>
  
  <TouchableOpacity onPress=()=>setShow(!show)>
  <Text>Show/Hide</Text>
  </TouchableOpacity>

  <View style=styles.main_content>

  </View>

</View>
  );