TypeScript React Native Zeichenfolgenliteralzuweisungsfehler

Question

Ich habe einen sehr merkwürdigen Fehler bezüglich des TypeScript erhalten, der mir sagt, dass Zeichenfolgenliterale nicht zusammenpassen. (Typoskript v1.8)

import { Component } from "react"; 
import { 
    StyleSheet, 
    Text, 
    View 
} from "react-native"; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: "center", 
    alignItems: "center", 
    backgroundColor: "#F5FCFF", 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: "center", 
    margin: 10, 
    } 
}); 

export class App extends Component<any, any> { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to React Native! 
     </Text> 
     </View> 
    ); 
    } 
} 

Fehler: src \ client \ index.ios.tsx (19,15): Fehler TS2322: Typ ‚{Schrift: Zahl; textAlign: Zeichenfolge; Marge: Anzahl; } 'ist nicht dem Typ' TextStyle 'zuweisbar. Die Eigenschaft 'textAlign' ist nicht kompatibel. Der Typ 'string' kann nicht dem Typ '"auto" | zugewiesen werden "links" | "richtig" | "Center"'. Der Typ 'string' kann nicht dem Typ '' center '' zugewiesen werden.

Ich habe die richtigen Typen installiert. Es scheint, dass das folgende in TypeScript nicht funktioniert.

interface Test { 
    a: "p" | "q" 
} 

let x : Test; 
let y = { 
    a: "p" 
} 

x = y; 

Quelle: https://blog.lopezjuri.com/2015/12/30/react-native--typescript/

Answer 1

leider müssen Sie die Art behaupten:

<Text style={styles.welcome as any}> 

Grund:

Der Typ abgeleitet wird auf declaraiton auf der Grundlage. Ein Zeichenfolgenliteral als string (statt Stringliteral) abgeleitet, weil

let foo = "asdf"; // foo: string 

// Its a string becuase: 
foo = "something else"; // Would be strange if this would error 

Answer 2

Ich weiß, ich bin zu spät, um das Spiel, kam aber nur über das gleiche Problem und bevorzugen diese Lösung (hate ‚any‘, da es mit Art von Niederlagen den Zweck der Typoskript, obwohl manchmal ist es die einzige Option):

import { Component } from "react"; 
import { 
    StyleSheet, 
    Text, 
    View 
} from "react-native"; 

interface Props { 
} 

interface State { 
} 

interface Style { 
    container: React.ViewStyle, 
    welcome: React.TextStyle 
} 

const styles = StyleSheet.create<Style>({ 
    container: { 
    flex: 1, 
    justifyContent: "center", 
    alignItems: "center", 
    backgroundColor: "#F5FCFF", 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: "center", 
    margin: 10, 
    } 
}); 

export class App extends Component<Props, State> { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to React Native! 
     </Text> 
     </View> 
    ); 
    } 
} 

Wenn wir StyleSheet.create sagen, welche Art der Stile der Build-Fehler erstellen behoben ist.