React-Native-Router-Flux - 在Android上左对齐标题

Question

我正在为Android应用程序使用React-native-router-flux，默认情况下标题似乎是居中的。我怎样才能将它对齐，以便它看起来像原生Android工具栏一样？

谢谢！

Answer 1

您可以覆盖样式并执行此操作，

<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,
}

希望能帮助到你！

Answer 2

您可以覆盖路由器中的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 3

我尝试了最后一个答案中的代码，但它没有用。所以我尝试并注意到当我们创建根场景时，你可以硬编码根场景中的样式（不在路由器中）

应该是这样你可以在根场景中设置所有场景的样式：

<Router>
    <Scene key="root"  titleStyle={{ alignSelf: 'center' }}>
          <Scene key="login" component={LoginForm} title="Please Login" initial />
          <Scene key="employeeList" component={EmployeeList} title="Emloyees"/>
    </Scene>
</Router>

Answer 4

使用headerLayoutPreset={'center'}到父组件：

<Scene key={'root'} headerLayoutPreset={'center'}>

那会有用。