Verwenden Sie navigationOptions in reaktionseigener

Question

Ich benutze navigatioinOptions in der Komponente.

Das Problem ist, dass der Raum immer verlassen wird, während ich navigationOptions verwende.

Hier ist mein Code:

static navigationOptions = ({ navigation }) => { 
return { 
    headerLeft: ... 
    } 
} 

I Bilddatei angehängt haben.

Bitte helfen Sie mir. Danke für Ihre Zeit.

Answer 1

Unter der Annahme, dass Ihr Screenshot headerLeft allein stellt daher ein Layout nicht auf die typischen headerLeft konformen | Titel | headerRight Anordnung, würde ich vorschlagen, dass Sie all diese Elemente in header allein bewegen. Auf diese Weise werden Sie den ganzen Raum haben für alles, was man braucht, das heißt:

static navigationOptions = ({ navigation }) => { 
    return { 
    header: (
     <View 
     style={{ 
      backgroundColor: "red", 
      paddingTop: 21, 
     }} 
     > 
     <View style={{ backgroundColor: "yellow" }}> 
      <Text>This is 100% wide</Text> 
     </View> 
     </View> 
    ), 
    }; 
}; 

, die wie folgt aussieht:

Beachten Sie, dass während der Header auf diese Weise verwenden, müssen Sie Kümmere dich selbst um alle plattformspezifischen Stile. Sie können dafür Header.js' source code hilfreich finden.