Реагирование WebkitAppRegion Warnings

Question

Хорошо, я очень новичок, поэтому очень жаль, если этот вопрос действительно глупый.

Я работал над приложением реагирования, используя электрон и экспо, и не до конца понимаю, как решить это предупреждение, отображаемое на моей консоли разработчика.

Warning: Failed prop type: Invalid props.style key `WebkitAppRegion` supplied to `View`.
Bad object: {
  "display": "flex",
  "flexDirection": "row",
  "height": 20,
  "backgroundColor": "#0e0e11",
  "margin": 0,
  "borderBottomWidth": 0.5,
  "borderColor": "#060607",
  "WebkitAppRegion": "drag"
}

Когда я изначально создавал дизайн для этого интерфейса, я делал это со стандартными html и S CSS, и теперь я пытаюсь изменить его, чтобы он реагировал как мой первый большой проект. Поэтому, проведя поиск в Google, я нашел информацию, что для включения моего -webkit-app-region: drag мне нужно было только CammelCase и удалить «-». За исключением того, что теперь он выдает эту ошибку, он выполняет функцию как задумано, но как решить проблему «недопустимого стиля реквизита»?

Какой-то дерьмовый код для критики xD

//app.tsx
import React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { SplashScreen } from 'expo';
import * as Font from 'expo-font';
import * as styles from './assets/styles/main'

SplashScreen.preventAutoHide();
setTimeout(SplashScreen.hide, 10000);


export default class App extends React.Component {
  state = {
    fontLoaded: false,
  };
  async componentDidMount() {
   await Font.loadAsync(styles.fontList);
   this.setState({ fontLoaded: true });
 }
  render() {
    return (
      this.state.fontLoaded ? (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'stretch', backgroundColor: styles.colors.dark1 }}>
          <this.DisplayHandles />
        </View>
      ) : null
    );
  }

  DisplayHandles() {
    if (Platform.OS === 'web' && process.versions.electron) {
      return ([
        <View style={[styles.electron.header, {WebkitAppRegion: 'drag'}]}>
          <View style={styles.electron.titleContainer}>
            <Text key='title' style={[styles.electron.title, {WebkitAppRegion: 'no-drag', 'userSelect': 'none'}]}> Smartcloud</Text>
          </View>
          <View style={styles.electron.controlContainer}>
            <Text key='minimize' style={[styles.electron.button, {WebkitAppRegion: 'no-drag', 'userSelect': 'none'}]} onClick={handleClick}>-</Text>
            <Text key='maximize' style={[styles.electron.button, {WebkitAppRegion: 'no-drag', 'userSelect': 'none'}]} onClick={handleClick}>+</Text>
            <Text key='close' style={[styles.electron.button, {WebkitAppRegion: 'no-drag', 'userSelect': 'none'}]} onClick={handleClick}>x</Text>
          </View>
        </View>,
        <View style={{ flex: 1}}>
          <Content.CreateHandles />
        </View>
      ]
      )
    }
    return <Content.Container/>
  }
}

function handleClick(e) {
  e.preventDefault();
  console.log('I was clicked')
}

class Content {
  static CreateHandles() {
    return (
      <View>
        <Content.Container />
      </View>
    )
  }
  static Container () {
    return (
      <View style={{alignItems: 'center',}}>
        <Content.TestingText />
      </View>
    )
  }

  static TestingText() {
    if (Platform.OS === 'web') {
      if (process.versions.electron) {
        return (<Text style={{fontSize: 60, color: styles.colors.light5, fontFamily: styles.rubik.medium} }> This is a Electron {process.versions.electron} + {Platform.OS} version </Text>)
      }
      return (<Text style={{fontSize: 60, color: styles.colors.light5, fontFamily: styles.rubik.medium}}> This is a {Platform.OS} version </Text>)
    }
    return <Text style={{fontSize: 20, color: styles.colors.light5, fontFamily: styles.rubik.medium}}> This is a {Platform.OS} version</Text>
  }
}

// ./assets/styles/main.tsx

export const electron = StyleSheet.create({
  header: {
    display: 'flex',
    flexDirection: 'row',
    height: 20,
    backgroundColor: colors.dark4,
    margin: 0,
    borderBottomWidth: 0.5,
    borderColor: colors.dark5,
  },
  titleContainer: {
    display: 'flex',
    alignItems: 'flex-start',
    flexGrow: 1,
  },
  controlContainer: {
    display: 'flex',
    justifyContent: 'flex-end',
    flexDirection: 'row',
    alignItems: 'center',
  },
  title: {
    color: colors.purple,
    margin: 0,
    marginLeft: 10,
    fontSize: 14,
    fontFamily: rubik.black,
  },
  button: {
    width: 25,
    margin: 0,
    marginLeft: 10,
    color: colors.purple,
    textAlign: 'center',
    fontSize: 14,
    fontFamily: rubik.black,
  }
})