发布实战

import { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";

const App = () => {
  const [city, setCity] = useState("");
  const [weather, setWeather] = useState(null);

  const fetchWeather = async () => {
    try {
      const res = await fetch(
        `https://api.example.com/weather?city=${encodeURIComponent(city)}`
      );
      const data = await res.json();
      setWeather(data);
    } catch (e) {
      alert("查询失败，请检查城市名或网络");
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="输入城市，如 烟台"
        value={city}
        onChangeText={setCity}
      />
      <Button title="查询天气" onPress={fetchWeather} />
      {weather && (
        <View style={styles.result}>
          <Text style={styles.city}>{weather.city}</Text>
          <Text style={styles.temp}>{weather.temp}°C</Text>
          <Text>{weather.desc}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, paddingTop: 60 },
  input: { borderWidth: 1, borderColor: "#ddd", padding: 10, borderRadius: 6, marginBottom: 12 },
  result: { marginTop: 20, alignItems: "center" },
  city: { fontSize: 22, fontWeight: "bold" },
  temp: { fontSize: 48, color: "#33691E", marginVertical: 8 }
});

export default App;