되돌아가다

이 도 아마추어 기사로부터 1주일・・・
【Windows판】정말 0으로부터의 React Native 환경 구축

기본적인 곳은 알고 온 것 같습니다.

그래서 기본 코드를 작성했기 때문에
조금이라도 참고가 되는 분이 있으면 다행입니다.

CRNA로 fetch부터 FlatList → onPress까지

그물이라면 부품 만의 정보로 상당히 고생했기 때문에
나는 전 문재 하는 파로 갑니다 (^^♪

기본적인 것은 쓸 수 있어야합니다.
제목에 쓴 fetch · FlatList 이외에도
state나 라이프사이클, 애로우 function, onPress 등
잘 사용할 것 같은 것은 사용하고 있습니다.

아직 아마추어 코드라고 생각하기 때문에
그 점은 양해 바랍니다.

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

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: null};
  }

  componentWillMount() {
    this._fetch();
  }

  _keyExtractor = (item) => item.releaseYear;

  _fetch = () => {
    fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState( {data: responseJson['movies']} );
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>一覧</Text>
        </View>
        <View style={styles.body}>
          <FlatList
            data={this.state.data}
            extraData={this.state.data}
            keyExtractor={this._keyExtractor}
            renderItem={({item}) =>
              <View style={styles.movieView}>
                <Text
                  style={styles.movieText}
                  onPress={() => Alert.alert(item.title)}
                >
                  {item.releaseYear}{'\n\t'}{item.title}
                </Text>
              </View>
            }
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    marginTop: 30,
    padding: 10,
    borderStyle: 'solid',
    borderWidth: 1,
    alignItems: 'center',
    backgroundColor: '#c6e6fa',
  },
  body: {
    flex: 1,
  },
  footer: {
    padding: 10,
    borderStyle: 'solid',
    borderTopWidth: 1,
    alignItems: 'center',
    backgroundColor: '#c6e6fa',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  movieView: {
    padding: 10,
    borderStyle: 'solid',
    borderBottomWidth: 1,
  },
  movieText: {
    fontSize: 16,
    lineHeight: 25,
  },
});

캡처

어때?

어떻게든 쓸 수 있게 되어 온 것일까?
라고 생각할 정도가 되었습니다.
(정답을 모르기 때문에 탐험이지만 ...)

앞으로는 Navigation이나 WebView 등도 해 나가고 싶습니다.
참고가 될 것 같다고 생각하면 꼭 팔로우 부탁드립니다 (^^)✨