ヘッダーのタイトルは、私が反応ネイティブアプリを作成するために、ネイティブ・ベースを使用しているネイティブ・ベース

を使用してネイティブ反応します。ドキュメントによれば、タイトルは自動的に中心に置かれますが、それはそうではありません（下記参照）。ヘッダーのタイトルは、私が反応ネイティブアプリを作成するために、ネイティブ・ベースを使用しているネイティブ・ベース

私はここで何かが欠けていますか？どんな助けもありがとう！

import { 
    Container, 
    Header, 
    Content, 
    Left, 
    Right, 
    Body, 
    Title, 
    Icon 
} from "native-base" 

export default class Seminars extends React.Component{ 

    render(){ 
     return(
      <Container style={styles.container}> 
       <Header style={styles.header}> 
        <Left> 
         <Icon name='arrow-back' /> 
        </Left> 
        <Body> 
         <Title>Seminars</Title> 
        </Body> 
        <Right> 
         <Icon name='menu' /> 
        </Right> 
       </Header> 
       <Content contentContainerStyle={styles.content} > 
        <Text>Content Here</Text> 
       </Content> 
      </Container> 
     ) 
    } 
} 
const styles = StyleSheet.create({ 
    container: { 

    }, 
    header: { 
     paddingRight: 15, 
     paddingLeft: 15 
    }, 
    content: { 
     display: "flex", 
     flex: 1, 
     justifyContent: "center", 
     padding: 15 
    } 
});

出典

2017-08-11 Chris_S

コードタグを付けて画像にはありません。 –

paddingRightを取り除き、ヘッダを置いてください。 –

こんにちは。パディングを削除しても効果はありません。 –

あなたはタイトルが中心になりたい場合は、次のように左、ボディと右にflex:1を追加することができます。

return(
     <Container style={styles.container}> 
      <Header style={styles.header}> 
       <Left style={{flex:1}}> 
        <Icon name='arrow-back' /> 
       </Left> 
       <Body style={{flex:1}}> 
        <Title>Seminars</Title> 
       </Body> 
       <Right style={{flex:1}}> 
        <Icon name='menu' /> 
       </Right> 
      </Header> 
      <Content contentContainerStyle={styles.content} > 
       <Text>Content Here</Text> 
      </Content> 
     </Container> 
    )

そして、これが結果です：

Iこの回答があなたを助けてくれることを願っています:)

出典

2017-08-11 16:08:00

どのように機能するのいずれか:(ませんでした' –

こんにちははい - 感謝助けのために。より良い今:) –

クール@Chris_Sを見て、私はあなたを助けることができる非常に嬉しく思います。 –

ヘッダーのタイトルは、私が反応ネイティブアプリを作成するために、ネイティブ・ベースを使用しているネイティブ・ベース

答えて

関連する問題