动态StyleSheet属性访问的类型问题

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

type Styles = {
  container: View['style'];
  text: Text['style'];
};

const App: React.FC = () => {
  const [isActive, setIsActive] = useState(false);

  const styles: Styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: isActive ? '#FFCCCC' : '#FFFFFF',
    },
    text: {
      fontSize: 20,
      color: isActive ? '#CC0000' : '#000000',
    },
  });

  return (
    <TouchableOpacity onPress={() => setIsActive(!isActive)}>
      <View style={styles.container}>
        <Text style={styles.text}>Click me to change style!</Text>
      </View>
    </TouchableOpacity>
  );
};

export default App;