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

时间:2018-04-07 19:06:34

标签: javascript react-native native-base

我使用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>

0 个答案:

没有答案
相关问题