React-Native-Router-Flux - Androidの左揃えタイトル

Question

AndroidアプリにReact-native-router-fluxを使用しています。デフォルトでは、タイトルは中央に表示されているようです。代わりにそれを代わりに左揃えにして、ネイティブAndroidツールバーの見た目を確認できますか？

ありがとうございました！

Answer 1

ルータのrenderBackButton機能を上書きして、戻るボタンの代わりにタイトルを表示することができます。このようなもの：

class Router extends React.Component { 
    renderTitle = (props) => { 
    return <Text style={...}>{props.leftTitle}</Text> 
    }; 

    render() { 
    return (
     <Router> 
     <Scene key="myScene" leftTitle="My Title" renderBackButton={this.renderTitle} /> 
     </Router> 
    ); 
    } 
} 

私はタイトルの小道具を指定しないので、シーンは中間のタイトルをレンダリングしません。代わりに、私は自分のleftTitle小道具を使用します。

Answer 2

あなたはスタイルをオーバーライドして、それを行う、

<Router 
     sceneStyle={styles.sceneStyle} 
     navigationBarStyle={styles.navBarStyle} 
     titleStyle={styles.titleStyle} 
     ... 
     ...> 
</Router> 

、その後、

titleStyle: { 
    color: '#FFFFFF', 
    fontWeight: 'bold', 
    fontSize: 18, 
    textAlign: 'left', 
    alignSelf: 'flex-start', 
    paddingLeft: 40, 
} 

としてtitleStyleを定義することができますが、それがお役に立てば幸い！