導航React本地組件在更新其父狀態後未正確呈現

我有一個包含Navigator和2個子組件的父組件。在父組件中，我有一個方法可以更新它所具有的View的高度，並將其傳遞給子組件，從而允許它們在安裝後刷新父項的狀態。導航React本地組件在更新其父狀態後未正確呈現

當我直接導航到第二個孩子，然後在第二個孩子的componentDidMount中調用此方法，第二個孩子被正確地重新渲染。但是，當我從第一個孩子導航到第二個孩子時，第二個孩子不會按預期重新呈現。

家長：

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    Navigator, 
    View 
} from 'react-native'; 

import FirstChild from './FirstChild'; 
import SecondChild from './SecondChild'; 

export default class Parent extends Component { 

    constructor(props) { 
    super(props); 
    this.setViewHeight = this.setViewHeight.bind(this); 
    this.state = { 
     viewHeight : 200 
    } 
    } 

    renderScene(route, navigator) { 

    var child = route.name == 'FirstChild' ? 
     <FirstChild navigator={navigator} heightSetter={this.setViewHeight}/> : 
     <SecondChild navigator={navigator} heightSetter={this.setViewHeight}/>; 

    return (
     <View style={styles.container}> 
     <View style={[styles.dynamicView, {height: this.state.viewHeight}]}/> 
     {child} 
     </View> 
    )  
    } 

    render() { 
    return (
     <Navigator 
     ref='navigator' 
     initialRoute={{ name: 'FirstChild' }} 
     renderScene={(route,navigator)=>this.renderScene(route,navigator)} 
     /> 
    ); 
    } 

    setViewHeight() { 
    this.setState({ 
     viewHeight: 100 
    }) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignSelf: 'stretch', 
    justifyContent: 'flex-start', 
    alignItems: 'center', 
    }, 
    dynamicView: { 
    alignSelf: 'stretch', 
    backgroundColor: 'rgba(100,100,200, 0.5)' 
    } 
});

第一個孩子：

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity 
} from 'react-native'; 

export default class FirstChild extends Component { 

    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <TouchableOpacity style={styles.child} onPress={() => this.props.navigator.push({name: 'SecondChild'}) }> 
     <View style={styles.child}> 
      <Text>FIRST</Text> 
     </View> 
     </TouchableOpacity> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    child: { 
    height: 200, 
    alignSelf: 'stretch', 
    backgroundColor: 'rgba(200,100,100,0.5)' 
    } 
});

二孩：

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

export default class SecondChild extends Component { 

    constructor(props) { 
    super(props) 
    } 

    componentDidMount() { 
    this.props.heightSetter(); 
    } 

    render() { 
    return (
     <View style={styles.child}> 
     <Text>Second</Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    child: { 
    height: 200, 
    alignSelf: 'stretch', 
    backgroundColor: 'rgba(200,100,100,0.5)' 
    } 
});

來源

2017-02-23 Tamir

你把現在的問題是不明確的實際。你有什麼行爲？如果沒有清楚的圖片說明它不可能回答你的問題，但可以告訴你一件事是

使用內置的導航來反應本地化並不複雜，當有許多場景需要通過它時支持。

您可以使用像react-native路由器通量這樣的導航庫，它肯定會幫助您解決您遇到的問題。

這裏是鏈接，

https://github.com/aksonov/react-native-router-flux

來源

2017-02-24 10:08:12

謝謝，我會檢查這個組件。我最終想做的是讓每個組件決定是否要導航欄，這只是示例代碼來演示問題。在這個示例中，我期望SecondChild將會「拉起來」，因爲它將父級子視圖的高度從200更新爲100，但它仍然保持在與子視圖高度仍然爲200的位置相同的位置。 – Tamir

你可以在這裏隱藏導航欄hidenavbar = {true/false}。如果我的回答在任何情況下都有幫助，請您提出我的回答。：D –

您的意思是在react-native-router-flux或內置導航中？如果你正在談論react-native-router-flux，我將不得不給它一個機會，並首先將它整合以取代構建它的導航。與此同時，我發現了內置導航的解決方法，所以我會繼續使用它。 – Tamir

導航React本地組件在更新其父狀態後未正確呈現

回答

相關問題