反应原生 - 到达某个部分时更改状态栏颜色



当到达应用的某个部分时,我该怎么做才能更改状态栏背景颜色属性?

例如:我有一个视图(部分(,默认背景颜色为红色,向下滚动到该部分时,我想将状态栏背景颜色更改为蓝色。

这是我想做的组件(注意:我使用的是本机基础(:

         <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>

首先将Content替换为ScrollView reac-native组件。在状态中添加背景色,然后在ScrollView某个位置做出反应时更新背景颜色。使用滚动功能检测ScrollView位置。

注意:如果本机基础组件Content ScrollView reac-native组件类似,则无需替换它。我没有native-base的经验

最新更新