Navigatorと2つの子コンポーネントを持つ親コンポーネントがあります。 親コンポーネントには、子コンポーネントに渡すビューの高さを更新するメソッドがあります。このメソッドは、マウントされた親の状態を更新することができます。Navigated React親の状態を更新した後、ネイティブコンポーネントが正しく表示されない
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)'
}
});
おかげで、私は、このコンポーネントをチェックします。私が最終的にやりたいことは、各コンポーネントがナビゲーションバーを持っているかどうかを判断させることです。これは問題を示すサンプルコードに過ぎません。このサンプルでは、親ビューの高さを200から100に更新しているため、SecondChildは「プルアップ」していますが、サブビューの高さがまだ200の場合と同じ位置にとどまります。 – Tamir
あなたはこれでhidenavbar = {true/false}のようにnavbarを隠すことができます。とにかく私の答えが役に立ったら、私の答えをアップしてください。 :D –
反応ネイティブルータフラックスまたは内蔵ナビゲーションを意味しますか?反応するネイティブルータフラックスについて話しているなら、私はそれにチャンスを与え、それを最初に統合してそれをナビゲートする代わりにしなければならないでしょう。その間、私はそれにとどまるので、組み込みのナビゲーションの回避策を見つけました。 – Tamir