React Nativeが子コンポーネントの小道具を更新しない

Question

React Nativeプロジェクトで作業していて、React NativeがReact flow（親から子へ）の小道具の更新を破っているようです。

基本的には、「App」コンポーネントから「Menu」コンポーネントを呼び出し、「Menu」に小道具を渡します。しかし、「App」状態を更新すると、「Menu」の小道具が更新されますが、これは起こりません。私は何か間違っているのですか？私のコードです

：

App.js

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

import Menu from './Menu'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     opacity: 2 
    } 
    } 

    componentDidMount() { 
    setTimeout(() => { 
     this.setState({ 
     opacity: 4 
     }); 
    }, 3000); 
    } 

    render() { 
    return(
     <View> 
     <Menu propOpacity={this.state.opacity} /> 
     </View> 
    ); 
    } 
} 

export default App; 

Menu.js

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

class Menu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     menuOpacity: props.propOpacity 
    } 
    } 

    render() { 
    return(
     <View> 
     <Text>Menu opacity: {this.state.menuOpacity}</Text> 
     </View> 
    ); 
    } 
} 

Menu.propTypes = { 
    propOpacity: React.PropTypes.number 
} 

Menu.defaultProps = { 
    propOpacity: 1 
} 

export default Menu; 

Answer 1

は、データフローを...あなたがされて破壊されていない反応します。初期状態の初期化の後、親が更新された小道具を送信した後、Menuの状態を後で更新することを忘れてしまいます。

これを試してみてください

...

class Menu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     menuOpacity: props.propOpacity 
    } 
    } 

    componentWillUpdate(nextProps, nextState) { 
     nextState.menuOpacity = nextProps.propOpacity; 
    } 

    render() { 
    return(
     <View> 
     <Text>Menu opacity: {this.state.menuOpacity}</Text> 
     </View> 
    ); 
    } 
}