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作爲

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

希望它能幫助！