React Native开发遇类型注解、解析错误及app.jsx无法运行求助

问题1：「Type Annotations can only be used in TypeScript Files」报错 #

• 原因：你在普通.js文件中使用了TypeScript专属的类型注解语法（比如data:GooglePlaceData、details:GooglePlaceDetail | null这类写法），JS原生不支持类型标注。
• 解法：两种选择，要么删除所有类型注解保留JS文件，要么将文件后缀改为.tsx并给项目配置TypeScript开发环境。

问题2：app.js重命名为app.jsx后项目停止运行 #

• 原因：旧版本React Native的默认打包配置（Metro、Babel）没有开启.jsx后缀的入口识别支持，如果你只是用JSX语法，完全可以保留.js后缀，React Native的JS解析器天然支持在.js文件中写JSX。
• 解法：如果一定要用.jsx后缀，需要修改项目根目录的metro.config.js，在resolver.sourceExts数组中添加'jsx'配置；如果没有特殊需求，直接保留.js后缀即可，不影响JSX语法使用。

问题3：第30、31行解析错误 #

• 原因：三处语法问题：
  1. 第31行调用setDestinationPlace时多写了无效的value:标识，React useState的更新函数直接传入要更新的值即可，不需要加键名。
  2. 第30行的类型注解在JS环境下属于非法语法。
  3. 原有useState初始值写法错误，不需要套一层initialState对象，否则会导致TextInput绑定的值是对象而非字符串，输入功能失效。
• 修正后的可用代码：

import React, {useState} from 'react';
import {View, TextInput, SafeAreaView} from 'react-native';
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';

import styles from './styles';

const DestinationSearch = props => {
  const [fromText, setFromText] = useState('');
  const [destinationText, setDestinationText] = useState('');

  const [originPlace, setOriginPlace] = useState(null);
  const [destinationPlace, setDestinationPlace] = useState(null);
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          value={fromText}
          onChangeText={setFromText}
          style={styles.textInput}
          placeholder="From"
        />
        <TextInput
          value={destinationText}
          onChangeText={setDestinationText}
          style={styles.textInput}
          placeholder="Where to?"
        />
        <GooglePlacesAutocomplete
          placeholder="Where to?"
          onPress={(data, details = null) => {
            setDestinationPlace({data, details});
          }}
          fetchDetails
          query={{
            key: 'AIzaSyB3rsn2ecpXZ8p9d8J_kLIH59rxt9KV6Rs',
            language: 'en',
          }}
        />
      </View>
    </SafeAreaView>
  );
};

export default DestinationSearch;

内容的提问来源于stack exchange，提问作者Nitesh Raj Khanal