は私が<code>Navigator</code>をレンダリングする<code>React.Component</code>を拡張していますリアクトナビゲータオブジェクト

Question

の背景色を変更します次のようになります。

type Props = { 
    navigator: Navigator; 
} 

class BTMapView extends React.Component { 
    props: Props; 
    constructor(props: Props) { 
    super(props); 
    ... 
    } 
} 

これで、this.props.navigatorのナビゲータオブジェクトを参照できるようになりました。このAPIを使用して、ナビゲーションバーの背景色を強制的にAPI呼び出しでオーバーライドするにはどうすればよいですか？

SOLUTION：

class BTNavigator extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     navBarStyle: styles.navBar, 
    }; 
    } 

    render() { 
    return (
     <Navigator 
     style={styles.container} 
     initialRoute={{}} 
     renderScene={this.renderScene} 
     navigationBar={ 
      <NavigationBar 
      routeMapper={NavigationBarRouteMapper} 
      style={this.state.navBarStyle} 
      /> 
     } 
     /> 
    ); 
    } 

    renderScene = (route, navigator) => { 
    ... 

    // pass both navigator and a reference to this 
    return <LoginScreen navigator={navigator} btNavigator={this} /> 
    } 

    setNavBarStyle(style) { 
    this.setState({ 
     navBarStyle: style, 
    }); 
    } 
} 

今navigatorとbtNavigatorを使用します。

type Props = { 
    navigator: Navigator, 
    btNavigator: BTNavigator, 
}; 

class LoginScreen extends React.Component { 
    props: Props; 

    foo() { 
    this.props.btNavigator.setNavBarStyle({ 
     backgroundColor: 'black', 
    }); 

    this.props.navigator.push({ 
     ... 
    }) 
    } 
} 

Answer 1

まずNavigatorといくつかの追加の状態や方法などを格納するNavigatorWrapperクラスを作ります。

setNavBarRed() { 
    this.setState({navBarColor: 'red'}); 
} 

render()方法であなたがNavigationBarスタイルのための追加チェックして上に書かれているだけのようNavigatorをレンダリングします。スタイルにはbackgroundColor: this.state.navBarColorと設定してください。

そして最後に、今、あなたはあなたの小道具を使用することができます。this.props.navigatorWrapper.setNavBarRed()

あなたはreact-reduxからconnectを使用している場合は、connectコールにwithRef引数を渡す必要があることに注意してください。