React Native - 到达某个部分时更改状态栏颜色答案

【问题标题】：React Native - Change StatusBar color when reached a certain sectionReact Native - 到达某个部分时更改状态栏颜色
【发布时间】：2017-04-10 01:02:06
【问题描述】：

当到达应用程序的某个部分时，如何更改 StatusBar backgroundColor 属性？

例如：我有一个View（Section），默认backgroundColor是红色，当向下滚动到那个section时我想把StatusBar的backgroundColor改为蓝色。

这是我想要做的组件（注意：我使用的是 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>

【问题讨论】：

发布你做了什么

标签： android react-native

【解决方案1】：

首先将Content 替换为ScrollView reac-native 组件。在状态中添加您的背景颜色，然后在ScrollView 在某个位置做出反应时更新您的背景颜色。使用onScroll函数检测ScrollView位置。

注意：如果Content native-base 组件与ScrollView reac-native 组件相似，则无需替换。我对native-base没有经验

【讨论】：

我设法做到了，但我找不到让它在任何其他设备上工作的方法，因为我正在使用我手机的 contentOffset.y 值。我想知道如何在每个设备中计算 Y 轴上“部分”的位置并用它做一些事情。
使用onLayout 查找您所在部分的 y 位置。