反応ナビゲーションを中心

Question

ヘッダを揃える：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' 
    } 
}); 

Answer 1

titleStyleプロパティは、あなたが今、あなたはナビゲーションオプションに渡すことでheaderTitleStyleを経由してタイトルをヘッダースタイルができheaderTitleStyleに名前を変更してきました。

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

Answer 2

画面がある場合はheaderLeftまたは戻るボタン、

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

は中央のタイトルを作るのに十分ではありません。
headerRight: (<View></View>)を中央に表示する必要があります。

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