Question

What can I do to change the StatusBar backgroundColor property when a certain section of the app is reached?

For example: I have a View (Section), the default backgroundColor is red, when scrolling down to that section I want to change the StatusBar backgroundColor to blue.

Here's the component where I want to do it (NOTE: I'm using Native Base):

         <Container>
            <StatusBar backgroundColor='#2c3e50' barStyle='dark-content' />
            <Content>
                <Grid>
                    <Col>
                        <Row>
                            <Text>
                                App title name
                            </Text>
                        </Row>
                    </Col>
                    <Row>
                        <Col>
                            <Text>
                                Random description
                            </Text>
                        </Col>
                    </Row>
                    <Col>
                        <Row>
                            <Text>

                            </Text>
                        </Row>
                    </Col>
                    <Row>
                        <Col style={{padding: 20, backgroundColor: '#2980b9'}}>
                            <Text style={{color: 'white', textAlign: 'justify'}}>
                                Random text
                            </Text>
                            <Text style={{ color: 'white', paddingTop: 10, textAlign: 'justify'}}>
                                More random text
                            </Text>
                        </Col>
                    </Row>
                    <Row>
                        <Col style={{backgroundColor: '#1abc9c'}}>
                            <Text style={{color: 'white', fontSize: 40, textAlign: 'center'}}>
                                Chocolate
                            </Text>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Text>
                                Random txt
                            </Text>
                        </Col>
                    </Row>
                </Grid>
            </Content>
        </Container>

Answer 1

首先用Content ScrollView组件替换reac-native。在状态中添加背景颜色，然后在ScrollView在特定位置作出反应时更新背景颜色。使用onScroll功能检测ScrollView位置。

注意：如果Content原生基础组件与ScrollView reac-native组件类似，则您无需替换它。我没有使用native-base

的经验

React Native - Change StatusBar color when reached a certain section

1 个答案: