React Native：Modal中根据状态值变化渲染条件组件

Question

我需要在 react native Modal 中显示类似标签的行为

我首先创建了一个状态变量 selectedSub，它使用值 'from'

进行初始化

现在我的模态有 2 个 TouchableHighlight 如下

_availabiltyModal() {
return (
<TouchableHighlight
    onPress={() => { this.setState({ selectedSub: 'from' }) }}
    activeOpacity={0.9}
    style={[styles.tab, this.state.selectedSub == 'from' && styles.active]}>
        <RkText rkType="header" style={this.state.selectedSub == 'from' && styles.activeText}>From</RkText>
</TouchableHighlight>
<TouchableHighlight
    onPress={() => { this.setState({ selectedSub: 'to' }) }}
    activeOpacity={0.9}
    style={[styles.tab, this.state.selectedSub == 'to' && styles.active]}>
        <RkText rkType="header" style={this.state.selectedSub == 'to' && styles.activeText}>To</RkText>
</TouchableHighlight>
{this._renderPicker()}
)}

这两个负责根据需要更改状态参数selectedSub。

基于此状态参数，我有条件地显示我制作和导入的另一个组件，如下所示

_renderPicker() {
    if (this.state.selectedSub == 'from') {
        return <TimePicker screenProps={{ time: this.state.selectedAvailabilty.from }} />
    } else {
        return <TimePicker screenProps={{ time: this.state.selectedAvailabilty.to }} />
    }
}

我已经在TouchableHighlight下面的Modal中调用了这个函数

现在根据 RN 文档，当使用 this.setState() 方法更新状态变量时，组件应该重新渲染。其他一切工作正常（TouchableHighlight 样式发生变化），状态更新也在控制台中反映出来。但是_renderPicker 函数不会返回更改后的视图，并且总是停留在前面所指出的初始化父级时设置的视图上。

有人可以帮我指出我可能忽略的问题吗？另外在旁注中，所有这些调用实际上都是直接在主 render() 方法之外进行的。这可能是一个问题

--更新------ 这是完整的参考

 render() {
    return({this._availabiltyModal()}
    <View style={appStyles.tagsWrapper}>
        {this.state.week.map((day, i) => {
            return (
                <TouchableHighlight
                    key={i}
                    activeOpacity={0.9}
                    style={[appStyle.mr10, appStyle.mb10]}
                    onPress={() => {
                       this.setModalVisible(true, day);
                    }}>
                    <Text style={appStyle.tag}>{day}</Text>
                </TouchableHighlight>
            )
        })}
     </View>
    )
}

Answer 1

将 _renderPicker 方法移动到 render() 方法中，例如...

render() {
...
{this._renderPicker()}
...
} 

从react-native看MODAL组件的代码

render(): React.Node {
    ....
    const innerChildren = __DEV__ ? (
      <AppContainer rootTag={this.context.rootTag}>
        {this.props.children}
      </AppContainer>
    ) : (
      this.props.children
    );

    return (
      <RCTModalHostView
        ....>
        <View style={[styles.container, containerStyles]}>
           {innerChildren} 
        </View>
      </RCTModalHostView>
    );
  }

您要更改的状态是使用模态组件的组件，该组件通过上部函数呈现其子级。当状态更新时，它只会重新呈现状态已更新的组件..所以在某个地方向下渲染组件内的子级在应用强制重新渲染之前，它不会重新渲染。

这是一篇有用的文章，可以进一步解释此功能的具体原理，forcefully re-rendering the child component