React Native(Coffeescript)动态组件显示切换及setNativeProps后属性值获取

首先得说，直接用setNativeProps修改原生属性虽然能生效，但不太符合React数据驱动的设计思路，而且原生属性的状态不会同步到React组件的state/props里，这就是你没法直接拿到修改后值的核心原因。我给你两种实用方案，按需选择：

方案一：用React State管理显示状态（推荐） #

这是最贴合React理念的方式，状态清晰易跟踪，获取当前值也非常直接：

1. 先在组件的初始state里，为每个动态组件维护一个显示状态映射：

getInitialState: ->
  displayStates: {} # 键是组件id，值为'flex'或'none'，默认可以设为'flex'

2. 动态创建组件时，把style的display属性绑定到state中对应id的状态：

# 假设你的组件数据来自componentsData数组
componentsData.map (item) =>
  <View
    key={item.id}
    ref={item.id}
    style={{ display: @state.displayStates[item.id] || 'flex' }} # 默认显示
  >
    {/* 组件内部内容 */}
  </View>

3. 改写changeDisplay函数，通过更新state实现状态切换：

changeDisplay: (id) ->
  # 获取当前状态，默认是'flex'
  currentDisplay = @state.displayStates[id] || 'flex'
  # 切换状态
  newDisplay = if currentDisplay is 'flex' then 'none' else 'flex'
  # 更新state
  @setState
    displayStates: { ...@state.displayStates, [id]: newDisplay }
  # 直接从state就能拿到最新状态
  console.log "组件#{id}的最新显示状态：", newDisplay

这种方式的好处是，状态完全由React掌控，不用担心原生视图和React虚拟DOM的状态不一致，后期维护也更省心。

方案二：基于setNativeProps的切换与状态获取 #

如果你因为特殊场景必须使用setNativeProps，可以这样处理：

1. 在组件实例里维护一个本地状态映射，用来跟踪每个组件的当前display值：

componentWillMount: ->
  @localDisplayStates = {} # 存储每个id对应的当前显示状态

2. 修改changeDisplay函数，先判断当前状态再切换，同时更新本地映射：

changeDisplay: (id) ->
  targetComponent = @refs[id]
  return unless targetComponent # 防止组件不存在的情况

  # 从本地映射获取当前状态，默认是'flex'
  currentDisplay = @localDisplayStates[id] || 'flex'
  newDisplay = if currentDisplay is 'flex' then 'none' else 'flex'

  # 修改原生视图属性
  targetComponent.setNativeProps { display: newDisplay }

  # 更新本地状态映射
  @localDisplayStates[id] = newDisplay

  # 现在就能直接从本地映射拿到最新值
  console.log "组件#{id}的最新显示状态：", @localDisplayStates[id]

如果担心本地状态和原生视图状态不一致，也可以通过UIManager直接从原生视图获取当前属性：

import { UIManager, findNodeHandle } from 'react-native'

# 新增一个获取原生状态的方法
getCurrentNativeDisplay: (id) ->
  targetComponent = @refs[id]
  return unless targetComponent

  nodeHandle = findNodeHandle(targetComponent)
  # 异步获取原生视图的样式
  UIManager.getViewStyles(nodeHandle, (styles) =>
    console.log "组件#{id}的原生显示状态：", styles.display
    # 同步到本地映射
    @localDisplayStates[id] = styles.display
  )

不过这种异步方式不如本地维护状态高效，只在特殊校验场景下使用即可。

最后提醒一句：setNativeProps应该尽量少用，它绕过了React的渲染流程，容易导致虚拟DOM和原生视图的状态不一致，增加后期维护成本，优先选择方案一的state管理方式哦～

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