对齐在中心页眉

反应导航：1.0.0-beta.11对齐在中心页眉

反应：16.0.0-alpha.12

反应天然：0.47.1

我正在关注ReactNavigation教程，将Header从通过的道具渲染到屏幕。

class ChatScreen extends React.Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: `Chat with ${navigation.state.params.user}`, // <- Talking bout this 
    }); 
    render() { 
    const { params } = this.props.navigation.state; 
    return (
     <View> 
     <Text>Chat with {params.user}</Text> 
     </View> 
    ); 
    } 
}

我想在title: Chat with ${navigation.state.params.user}的title出现在中心。我如何设计它？我也想要改变它的颜色。

我试过这个suggestion但没有工作。

非常感谢。

更新代码后，它对齐到中心，但它不是中心。这是更多的权利。我认为这是左边箭头的原因，我该如何解决它？

更新的代码：

static navigationOptions = ({ navigation }) => ({ 
    title: `${navigation.state.params.name.item.name}`, 
    headerTitleStyle: { 
    color: '#000', 
    textAlign: 'center', 
    alignSelf: 'center' 
    } 
});

来源

2017-08-15 Somename

titleStyle财产已重新命名为headerTitleStyle现在，您可以风格，你将它传递给导航选项通过headerTitleStyle头标题。

.... 
headerTitleStyle: { 
     color: 'color value', 
     textAlign: 'center', 
     alignSelf: 'center' //if style using flexbox 
} 
....

来源

2017-08-15 19:02:34 Khurram

谢谢。这解决了它，但有一个小问题。更新代码后，它对齐到中心，但它不是中心。这是更多的权利。我认为这是左边箭头的原因，我该如何解决它？我更新了我的问题中的截图。你能帮我解决这个问题吗？非常感谢。 – Somename

@Somename是的，这是由于后退按钮，你可以通过在导航选项中隐藏'headerLeft：null'来修复它。或在右侧放置另一个按钮。如果你不想在右侧放置一个按钮，你可以将'marginRight：40'分配给'headerTitleStyle' – Khurram

工作..谢谢 – Somename

如果你的屏幕上有headerLeft或后退按钮，

headerTitleStyle: { 
    textAlign: "center", 
    alignSelf: "center" 
}

是不足以使中心称号。
您必须使用headerRight: (<View></View>)才能显示在中心。

static navigationOptions = { 
    headerTitleStyle: { 
     textAlign: "center", 
     alignSelf: "center" 
    } 
    headerRight: <View><View /> 
    };

来源

2017-11-24 09:17:24

对齐在中心页眉

回答

相关问题