Question

我使用React Native + Native base来创建分段视图。段的每个按钮在下面呈现不同的视图（子组件）。然而，当我通过切换状态来切换视图时，通过按钮按下按钮，然后切换回来，我可以看到子组件被重新渲染，因为它没有保持我的列表的滚动位置。我的问题是，当我在段状态之间来回切换时，有没有办法不卸载子组件并以某种方式维护视图（子组件）中的状态？

Calendar组件下面的代码中的

将是子组件。并且更改段的状态将在显示和不显示日历之间切换。

<Container style={styles.testContainer}>


       <Segment style={{backgroundColor: 'blue' }}>
              <Button
              style={{ backgroundColor: this.state.seg === 1 ? "white" : undefined,
              borderColor: "white"}}
               first
               active={this.state.seg === 1 ? true : false}
                                onPress={() => this.setState({ seg: 1 })}
                >
                <Text style={{ color: this.state.seg === 1 ? "#2c6da4" : "white" }}>Posts</Text></Button>
              <Button last last
                                style={{
                                    backgroundColor: this.state.seg === 2 ? "white" : undefined,
                                    borderColor: "white",
                                }}
                                active={this.state.seg === 2 ? true : false}
                                onPress={() => this.setState({ seg: 2 })}
                            ><Text style={{ color: this.state.seg === 2 ? "blue" : "white" }}>Profile</Text></Button>
            </Segment>

        {this.state.seg === 1 ? <Calendar onSelectDate={this.onSelectDate} /> : null }

      </Container>

React native：在Segment视图中维护子组件的状态

0 个答案: