React-native-router-flux: 장면의 수명 주기 후크에서 동적으로 navigationBarStyle 설정

마찬가지로, navBar에서 데이터에 의존하는 작업으로 액션 시트를 렌더링하는 동적 오른쪽 버튼을 사용하려고 합니다. 생각해보세요... Follow userABC123 ; Block userABC123 ; 등. 사용자 지정 작업 시트를 생성하기 위해 수명 주기 후크(즉, 데이터를 가져온 후) 내에서 onRight 함수를 동적으로 생성하는 방법이 있습니까?

예, Actions.refresh()를 통해 소품을 업데이트할 수 있습니다. 예:
Actions.refresh({ renderRightButton: this._renderRightButton });
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

@sheparddw 가 맞습니다. 같은 방법으로 navigationBarStyle 를 Actions.refresh({navigationBarStyle ... }) 업데이트할 수 있습니다.

Actions.refresh() 호출을 어디에 넣어야 합니까?
내 플럭스 작업에 새로 고침 호출을 넣으면(스타일이 변경되어야 할 때 호출됨) 현재 선택한 탭의 탐색 모음 스타일만 업데이트합니다. 탭을 전환하면 이전 스타일로 돌아갑니다.

탭을 전환할 때마다 업데이트되는 유일한 구성 요소는 내 탭 모음이므로 componentWillReceiveProps 또는 componentWillUpdate 있는 내 Tabbar 구성 요소의 새로 고침을 시도했습니다. 그런 다음 새로 고칠 때마다 Tabbar가 새 소품을 가져오고 다시 새로 고쳐지기 때문에 무한 재귀가 발생합니다.

@aksonov 이것에 대해 언급하시겠습니까?

내 구성 요소에서 Actions.refresh를 사용하고 있었지만 이것이 장면의 속성을 동적으로 업데이트하는 올바른 방법이라고 생각하지 않습니다. 여기 내 발견이 있습니다.

// 참고: Component를 확장하는 es6 클래스를 사용하고 있습니다.

Actions.refresh({title: 'drawer'}); 생성자에서 다음과 같이 불평합니다.

경고: setState(...): 기존 상태 전환 중에는 업데이트할 수 없습니다(예: render 또는 다른 구성 요소의 생성자 내에서). 렌더 메소드는 props와 state의 순수한 함수여야 합니다. 생성자 부작용은 안티 패턴이지만 componentWillMount 로 이동할 수 있습니다.

이것은 단지 경고일 뿐이며 원하는 결과를 얻을 수 있습니다. 그러나 부작용이 있습니다. 이 작업을 수행할 때 render 함수가 두 번 호출됩니다.

이것을 componentWillMount 함수에 직접 배치하면 react는 경고를 발행하지 않지만 render도 두 번 호출됩니다.

생성자에서 이렇게 하면:
this.props.navigationState.title = 'test';

그러면 반응이 불평하지 않고 우리의 navigationBar 제목이 테스트될 것입니다. render 메서드는 한 번만 호출됩니다. onRight, onRightTitle 등을 호출하는 경우에도 마찬가지입니다. 이제 이 https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad mutating props is bad에 따른 것입니다.

따라서 나쁜 props를 변경하거나 Actions.refresh를 호출하여 구성 요소를 두 번 렌더링하는 것과 같은 부작용이 있을 수 있습니다. 아이디어가 있습니까?

이에 대한 업데이트가 있습니까? 사용자 소품에 따라 navigationBarStyle을 동적으로 설정하는 것과 똑같은 문제가 있습니다. 특히 탐색 모음의 배경색을 변경하려고 합니다. Actions.refresh({navigationBarStyle ... }) 도 작동하지 않습니다.

<Scene key="myScene"
component={myComponent}
renderTitle={() => { return <NavigationBarTitle title="My Title"/>}}
sceneStyle={styles.scene}
navigationBarStyle={[styles.navBar, this.props.theme.backgroundColor]} <- 상태가 변경될 때 backgroundColor가 업데이트되지 않음
onRight={this.pushNoticeFilter}/>

탐색 모음의 사용자 지정 제목 구성 요소에서 다른 제목과 스타일을 동적으로 렌더링했지만 navigationBarStyle은 상태 변경을 수신하지 않습니다.

이것은 "Key myScene is already defined!"를 인쇄하는 장면의 재렌더링을 무시하는 RNRF와 관련이 있습니까?

@mikaelrosquist @compojoom 서버에서 가져온 "테마"를 저장하기 위해 redux를 사용하고 있습니다. 래퍼 구성 요소를 만들기 위해 동적 탐색 모음 스타일을 수행하는 가장 쉬운 방법입니다.

import React, { Component } from 'react';
import { NavBar } from 'react-native-router-flux';
import Variables from 'market/app/styles/base';

class CircllyNavBar extends Component {
  render() {
    return (
      <NavBar {...this.props} navigationBarStyle={{ backgroundColor: Variables.BRAND_PRIMARY() }} />
    )
  }
}

export default CircllyNavBar;

<Scene key="search_form" title="Search"
    component={SearchForm}
    navBar={CircllyNavBar} />

@OhaiBBQ 감사합니다! 완벽하게 작동합니다! 👍

@mikaelrosquist 문제 없습니다. 내가 React를 처음 접했을 때 흥미롭게 발견한 또 다른 점은 React 구성 요소의 defaultProps 클래스 속성을 사용하여 RNRF 장면의 기본 소품을 설정할 수 있다는 것입니다.

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};