ساخت اپلیکیشن ساده آب و هوا با React Native و Expo — از صفر تا صد

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4export default class App extends React.Component {
5  render() {
6    return (
7      <View style={styles.container}>
8        <Text>Minimalist Weather App</Text>
9      </View>
10    );
11  }
12}
13
14const styles = StyleSheet.create({
15  container: {
16    flex: 1,
17    backgroundColor: '#fff',
18    alignItems: 'center',
19    justifyContent: 'center'
20  }
21});

1<Text>Minimalist Weather App</Text>

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4export default class App extends React.Component {
5  state = {
6    isLoading: false
7  };
8
9  render() {
10    const { isLoading } = this.state;
11    return (
12      <View style={styles.container}>
13        {isLoading ? null : (
14          <View>
15            <Text>Minimalist Weather App</Text>
16          </View>
17        )}
18      </View>
19    );
20  }
21}
22
23const styles = StyleSheet.create({
24  container: {
25    flex: 1,
26    backgroundColor: '#fff',
27    alignItems: 'center',
28    justifyContent: 'center'
29  }
30});

1import React from 'react';
2import { StyleSheet, Text, View, Animated } from 'react-native';
3
4export default class App extends React.Component {
5  state = {
6    isLoading: true
7  };
8
9  render() {
10    const { isLoading } = this.state;
11    return (
12      <View style={styles.container}>
13        {isLoading ? (
14          <Text>Fetching The Weather</Text>
15        ) : (
16          <View>
17            <Text>Minimalist Weather App</Text>
18          </View>
19        )}
20      </View>
21    );
22  }
23}
24
25const styles = StyleSheet.create({
26  container: {
27    flex: 1,
28    backgroundColor: '#fff',
29    alignItems: 'center',
30    justifyContent: 'center'
31  }
32});

1import React from 'react';
2import { View, Text, Stylesheet } from 'react-native';
3
4const Weather = () => {
5  return (
6    <View style={styles.container}>
7      <View style={styles.headerContainer} />
8      <View style={styles.bodyContainer} />
9    </View>
10  );
11};
12
13const styles = StyleSheet({
14  container: {
15    flex: 1
16  },
17  headerContainer: {},
18  bodyContainer: {}
19});
20
21export default Weather;

1import React from 'react';
2import { View, Text, StyleSheet } from 'react-native';
3import { MaterialCommunityIcons } from '@expo/vector-icons';
4
5const Weather = () => {
6  return (
7    <View style={styles.weatherContainer}>
8      <View style={styles.headerContainer}>
9        <MaterialCommunityIcons size={48} name="weather-sunny" color={'#fff'} />
10        <Text style={styles.tempText}>Temperature˚</Text>
11      </View>
12      <View style={styles.bodyContainer}>
13        <Text style={styles.title}>So Sunny</Text>
14        <Text style={styles.subtitle}>It hurts my eyes!</Text>
15      </View>
16    </View>
17  );
18};
19
20const styles = StyleSheet.create({
21  weatherContainer: {
22    flex: 1,
23    backgroundColor: '#f7b733'
24  },
25  headerContainer: {
26    flex: 1,
27    alignItems: 'center',
28    justifyContent: 'center'
29  },
30  tempText: {
31    fontSize: 48,
32    color: '#fff'
33  },
34  bodyContainer: {
35    flex: 2,
36    alignItems: 'flex-start',
37    justifyContent: 'flex-end',
38    paddingLeft: 25,
39    marginBottom: 40
40  },
41  title: {
42    fontSize: 48,
43    color: '#fff'
44  },
45  subtitle: {
46    fontSize: 24,
47    color: '#fff'
48  }
49});
50
51export default Weather;

1export const API_KEY = 'YOUR_API_KEY HERE';

1import React from 'react';
2import { StyleSheet, Text, View, Animated } from 'react-native';
3
4import { API_KEY } from './utils/WeatherAPIKey';
5
6import Weather from './components/Weather';
7
8export default class App extends React.Component {
9  state = {
10    isLoading: false,
11    temperature: 0,
12    weatherCondition: null,
13    error: null
14  };
15
16  componentDidMount() {
17    navigator.geolocation.getCurrentPosition(
18      position => {
19        this.fetchWeather(position.coords.latitude, position.coords.longitude);
20      },
21      error => {
22        this.setState({
23          error: 'Error Gettig Weather Condtions'
24        });
25      }
26    );
27  }
28
29  fetchWeather(lat = 25, lon = 25) {
30    fetch(
31      `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&APPID=${API_KEY}&units=metric`
32    )
33      .then(res => res.json())
34      .then(json => {
35        console.log(json);
36      });
37  }
38
39  render() {
40    const { isLoading } = this.state;
41    return (
42      <View style={styles.container}>
43        {isLoading ? <Text>Fetching The Weather</Text> : <Weather />}
44      </View>
45    );
46  }
47}
48
49const styles = StyleSheet.create({
50  container: {
51    flex: 1,
52    backgroundColor: '#fff'
53  }
54});

1.then(json => {
2        // console.log(json);
3        this.setState({
4          temperature: json.main.temp,
5          weatherCondition: json.weather[0].main,
6          isLoading: false
7        });

1<Weather weather={weatherCondition} temperature={temperature} />

1const Weather = ({ weather, temperature }) => {
2  return (
3    <View style={styles.weatherContainer}>
4      <View style={styles.headerContainer}>
5        <MaterialCommunityIcons size={48} name="weather-sunny" color={'#fff'} />
6        <Text style={styles.tempText}>{temperature}˚</Text>
7      </View>
8      <View style={styles.bodyContainer}>
9        <Text style={styles.title}>{weather}</Text>
10        <Text style={styles.subtitle}>It hurts my eyes!</Text>
11      </View>
12    </View>
13  );
14};

1export const weatherConditions = {
2  Rain: {
3    color: '#005BEA',
4    title: 'Raining',
5    subtitle: 'Get a cup of coffee',
6    icon: 'weather-rainy'
7  },
8  Clear: {
9    color: '#f7b733',
10    title: 'So Sunny',
11    subtitle: 'It is hurting my eyes',
12    icon: 'weather-sunny'
13  },
14  Thunderstorm: {
15    color: '#616161',
16    title: 'A Storm is coming',
17    subtitle: 'Because Gods are angry',
18    icon: 'weather-lightning'
19  },
20  Clouds: {
21    color: '#1F1C2C',
22    title: 'Clouds',
23    subtitle: 'Everywhere',
24    icon: 'weather-cloudy'
25  },
26
27  Snow: {
28    color: '#00d2ff',
29    title: 'Snow',
30    subtitle: 'Get out and build a snowman for me',
31    icon: 'weather-snowy'
32  },
33  Drizzle: {
34    color: '#076585',
35    title: 'Drizzle',
36    subtitle: 'Partially raining...',
37    icon: 'weather-hail'
38  },
39  Haze: {
40    color: '#66A6FF',
41    title: 'Haze',
42    subtitle: 'Another name for Partial Raining',
43    icon: 'weather-hail'
44  },
45  Mist: {
46    color: '#3CD3AD',
47    title: 'Mist',
48    subtitle: "Don't roam in forests!",
49    icon: 'weather-fog'
50  }
51};

1import React from 'react';
2import { View, Text, StyleSheet } from 'react-native';
3import { MaterialCommunityIcons } from '@expo/vector-icons';
4import PropTypes from 'prop-types';
5import { weatherConditions } from '../utils/WeatherConditions';
6
7const Weather = ({ weather, temperature }) => {
8  return (
9    <View
10      style={[
11        styles.weatherContainer,
12        { backgroundColor: weatherConditions[weather].color }
13      ]}
14    >
15      <View style={styles.headerContainer}>
16        <MaterialCommunityIcons
17          size={72}
18          name={weatherConditions[weather].icon}
19          color={'#fff'}
20        />
21        <Text style={styles.tempText}>{temperature}˚</Text>
22      </View>
23      <View style={styles.bodyContainer}>
24        <Text style={styles.title}>{weatherConditions[weather].title}</Text>
25        <Text style={styles.subtitle}>
26          {weatherConditions[weather].subtitle}
27        </Text>
28      </View>
29    </View>
30  );
31};
32
33Weather.propTypes = {
34  temperature: PropTypes.number.isRequired,
35  weather: PropTypes.string
36};
37
38const styles = StyleSheet.create({
39  weatherContainer: {
40    flex: 1
41  },
42  headerContainer: {
43    flex: 1,
44    flexDirection: 'row',
45    alignItems: 'center',
46    justifyContent: 'space-around'
47  },
48  tempText: {
49    fontSize: 72,
50    color: '#fff'
51  },
52  bodyContainer: {
53    flex: 2,
54    alignItems: 'flex-start',
55    justifyContent: 'flex-end',
56    paddingLeft: 25,
57    marginBottom: 40
58  },
59  title: {
60    fontSize: 60,
61    color: '#fff'
62  },
63  subtitle: {
64    fontSize: 24,
65    color: '#fff'
66  }
67});
68
69export default Weather;