React Native - 在达到某个区域时更改StatusBar颜色

当达到某个应用程序的某个部分时，可以如何更改StatusBar backgroundColor属性？React Native - 在达到某个区域时更改StatusBar颜色

例如：我有一个视图（部分），默认backgroundColor是红色，当向下滚动到该部分我想将StatusBar backgroundColor更改为蓝色。

这里就是我想要做的组件（注：我使用的是天然碱基）：

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

来源

2017-04-10 Diego Francisco

发布你做了什么，而不是 –

先用ScrollViewreac-native部件更换Content。在状态中添加背景颜色，然后在ScrollView在特定位置发生反应时更新背景颜色。使用onScroll函数来检测ScrollView的位置。

注：如果Content原生的基础组分类似于ScrollViewreac-native组件，那么你就需要更换。我有没有经验native-base

来源

2017-04-11 08:55:37

我设法做到这一点，但我没有找到一种方法，使其在任何其他设备工作，因为我使用'contentOffset.y'我的手机的价值。我想知道如何计算每个设备中Y轴上“截面”的位置，并对其进行处理。 –

使用[onLayout]（https://facebook.github.io/react-native/docs/view.html#onlayout）查找您的部分的y位置。 –

React Native - 在达到某个区域时更改StatusBar颜色

回答

相关问题