Navigated React親の状態を更新した後、ネイティブコンポーネントが正しく表示されない

Question

Navigatorと2つの子コンポーネントを持つ親コンポーネントがあります。 親コンポーネントには、子コンポーネントに渡すビューの高さを更新するメソッドがあります。このメソッドは、マウントされた親の状態を更新することができます。

2番目の子に直接移動し、2番目の子のcomponentDidMountでこのメソッドを呼び出すと、2番目の子が正しく再レンダリングされます。 しかし、最初の子から2番目の子にナビゲートすると、2番目の子は期待どおりに再レンダリングされません。

親：

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)' 
    } 
}); 

Answer 1

あなたが入れている質問は、実際には明確ではありません。あなたが持っている行動は何ですか？あなたの質問に答えることはできませんが、あなたに1つのことを教えてください。

ネイティブに反応するために組み込まれているナビゲーションを使用することは少し複雑であり、通過するシーンが多い場合はありませんまったくサポート。

リアクションネイティブルータフラックスのようなナビゲーションライブラリを使用することができます。これは間違いなくあなたが持っている問題の解決に役立ちます。ここで

がリンク、

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