初めてのReactNativeメモ⑤axiosでgetしたデータを表示、別のページで表示するルーティング

表示するだけは何とか出来ましたが詳細ページにデータを送る方法がよくわからないので調べる。

参考にできそうな記事を発見しました。

medium.com

ルーティング

どうやら取得したデータを別のページに送ることをルーティング(Routing)と言うらしい。

これらのルーティングを実現する方法は何個かありReact NavigationやReact Native Routerなどがある。

参考にさせていただいた記事
twins-tech.hatenablog.com

とりあえずやってみる。

ナビゲーションだけのページを作ってApp.jsに表示

import {createAppContainer} from 'react-navigation';
import NavigatePage from './components/NavigatePage';


const App = createAppContainer(NavigatePage);
export default App;

各スクリーンを登録するコンポーメント

import { createStackNavigator } from 'react-navigation';
import HomeScreen from './screens/home/HomeScreen';
import DetailScreen from './screens/DetailScreen';

export default createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'トップ',
headerBackTitle: null,
headerTintColor: 'white',
headerStyle: {
backgroundColor: "#55c401",
color: '#fff'
 }
 }
 },
Detail: {
screen: DetailScreen,
navigationOptions: {
headerTitle: '詳細',
headerBackTitle: null,
headerTintColor: 'white',
headerStyle: {
backgroundColor: "#55c401",
color: '#fff'
 }
 }
 },
 });

ここにはトップページ表示される「HomeScreen.js」と詳細ページを表示する「DetailScreen.js」を登録する。

HomeScreen.js

import React, { Component } from 'react';
import { ScrollView, View } from 'react-native';
import axios from 'axios';
import { Button , Card } from 'react-native-elements';

class HomeScreen extends React.Component {

constructor(){
super();
this.state = {
images: []
 }
 }

componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
 .then(res => {
this.setState({ images: res.data });
 });
 }
 
renderImages() {
return this.state.images.map(data => {
return (
<View>
<Card
title={data.title}
image ={{ uri: data.image }}>
<Button
onPress={()=> this.props.navigation.navigate('Detail', {info: data.url})}
icon={{name: 'eye', type: 'octicon'}}
backgroundColor='#03A9F4'
title='もっとみる'/>
</Card>
</View>
 )
 });
 }
 
render() {
return (
<ScrollView>
{this.renderImages()}
</ScrollView>
 )
 }
}

export default HomeScreen;

constructor

stateを設定 images: []

constructor(){
super();
this.state = {
images: []
   }
 }

componentWillMount

https://rallycoding.herokuapp.com/api/music_albums

componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
 .then(res => {
this.setState({ images: res.data });
 });
 }

renderImages

取得したデータを.mapを使って配列処理して表示する。

.mapとは

「map」は配列データに使うメソッドであり、各要素1つずつに対して「コールバック関数」を実行し、その結果を新しい配列として返すことが出来るようになっています。

つまり、この関数内に実行したい処理を書いておくことで、配列の各要素に対して好きな操作をすることが出来るというわけです！
www.sejuku.net

renderImages() {
return this.state.images.map(data => {
return (
<View>
<Card
title={data.title}
image ={{ uri: data.image }}>
<Button
onPress={()=> this.props.navigation.navigate('Detail', {info: data.url})}
icon={{name: 'eye', type: 'octicon'}}
backgroundColor='#03A9F4'
title='もっとみる'/>
</Card>
</View>
 )
 });
 }

onPressでパラメータを渡す

.navigate('Detail', {info: data.url})

タップしたらDetailページに飛ばす。

data.urlの値をinfoに格納して渡す。

onPress={()=> this.props.navigation.navigate('Detail', {info: data.url})}

render

でスクロール可能領域のなかにイメージを並べる。

render() {
return (
<ScrollView>
{this.renderImages()}
</ScrollView>
 )
 }

DetailScreen.js

画像がタップされたら飛ばされるページでウェブビューを使って表示する。

import React from 'react';
import { WebView } from 'react-native';

class DetailScreen extends React.Component {

render(){
const {info} = this.props.navigation.state.params;
return (
<WebView
source={{uri: info}}/>
 );
 }
 }
export default DetailScreen;

render

 
const {info} = this.props.navigation.state.params;
で送られたinfoパラーメーターを取得する。

<WebView
source={{uri: info}}/>

でuriに取ってきたurlを渡して表示させる。

render(){
const {info} = this.props.navigation.state.params;
return (
<WebView
source={{uri: info}}/>
 );
 }
 }

 ちょっとわかってきた！