ReactNative/Redux：componentWillReceivePropsで派生した値に基づく条件付きコンポーネント

Question

シーンの[追加]ボタンを押すと、ナビゲーションバーが非表示に設定され、 'renderAddCategory'のコンポーネントがvisibleに設定されている必要があります。

[追加]ボタンを押すと、Actions.refresh（{hideNavbar：true}）はナビゲーションバーを非表示に設定します。このinturnはcomponentWillReceivePropsを呼び出し、フラグshowAddCategoryが設定されます。 'showAddCategory'フラグで設定された値に基づいて、 'renderAddCategory'のコンポーネントはコンポーネントを表示/非表示にする必要があります。

"< < < showAddCategory >>>>>"に変更する必要があります。

<Scene key="CategoryContainer" component={CategoryContainer} title="Category" initial 
rightTitle="Add" onRight={() => Actions.refresh({hideNavBar: true})}/> 

コンポーネント：

componentWillReceiveProps(nextProps){ 
if(nextProps.hasOwnProperty('hideNavBar') && nextProps.hideNavBar){ 
    if(!nextProps.showAddCategory){ 
    nextProps.onCategoryAddMenu(); 
    console.log(nextProps.showAddCategory); // returns new value: true 
    console.log(this.props.showAddCategory); // returns old value: false 
    } 
} 
} 

render() { 
return (
    <View style={styles.container}> 
    {this.renderAddCategory()} 
    </View> 
);} 

renderAddCategory(){ 
    if(<<<showAddCategory>>>>>){ 
    return (
     <View> 
     <TextInput/> 
     <TouchableHighlight> 
      <Text>Add</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
} 
}  

const mapStateToProps = (state) => { 
    return { 
    showAddCategory: state.categoryReducer.showAddCategory, 
    }; 
} 

処置：

export function categoryAddMenu(){ 
return { 
    type: "CATEGORY_ADD_MENU", 
}; 
} 

リデューサー：

const initialState = { 
    showAddCategory:false, 
} 

export default function categoryReducer (state = initialState, action) {   
    case "CATEGORY_ADD_MENU": 
    return Object.assign({}, state, { 
     showAddCategory: true 
    }); 
} 

Answer 1

私は何をあなたがやっていることは正しいアプローチであるかどうかわからないです。しかし、あなたの問題は地方の州を使って解決できると思います。 showAddCategoryを格納するのに本当にreduxを使用する必要がありますか？

componentWillReceiveProps(nextProps){ 
if(nextProps.hasOwnProperty('hideNavBar')){ 
    this.setState({ showAddCategory: nextProps.hideNavBar }); 
} 
} 

その後、あなたはまた、 "これは" で機能をrenderAddCategoryする親をバインドする必要があるかもしれませんthis.state.showAddCategory

renderAddCategory(){ 
    if(this.state.showAddCategory) { 
    return (
     <View> 
     <TextInput/> 
     <TouchableHighlight> 
      <Text>Add</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
} 
} 

で< < < showAddCategory >>>>>を交換することができるはずですあなたのコンストラクタ。

constructor(props) { 
    super(props); 
    this._renderPage = this._renderPage.bind(this); 
    }