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

回答

相關問題