블록체인 개발자 양성과정 중 리액트 네이티브 관련 자료 모음

리액트 네이티브 Zero to App
#21

Modal 예제

#22

TabNavigator 실습

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
},
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

export default createAppContainer(TabNavigator);
#23

다양한 컴포넌트 실습

import React from 'react';
import { Button, Image, View } from 'react-native';
import { ImagePicker, Permissions } from 'expo';

export default class ImagePickerExample extends React.Component {
  state = {
    image: null,
  };
  async componentDidMount(){
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
  }
  render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      </View>
    );
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

// 설치
npm install moment --save

import moment from 'moment';

const a = moment(date);
a.format('YYYY MM DD');
좋아요 2
#24

redux 기본 예제

#25

플레이 그라운드 튜토리얼

#26

Hyperledger composer 설치 관련 링크

npm install -g composer-cli@0.20 composer-rest-server@0.20 generator-hyperledger-composer@0.20 yo composer-playground@0.20

EACCESS: permission denied. /usr/lib/node_modules

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile
#27

Composer 설명 참고 글

#28
#29 
export COMPOSER_CARD=admin@dogdoq
export COMPOSER_NAMESPACES=never
export COMPOSER_AUTHENTICATION=true
export COMPOSER_MULTIUSER=true
export COMPOSER_PROVIDERS='{
    "facebook": {
        "provider": "facebook",
        "module": "passport-facebook",
        "clientID": "315940965929456",
        "clientSecret": "bc72a6d8d1ce4758b6221f9f9dd01191",
        "authPath": "/auth/facebook",
        "callbackURL": "/auth/facebook/callback",
        "successRedirect": "/",
        "failureRedirect": "/"
    },
 "google": {
        "provider": "google",
        "module": "passport-google-oauth2",
        "clientID": "516918780142-fut8p3967e8ih04mkjeid4lv8l1qglem.apps.googleusercontent.com",
        "clientSecret": "D99QQS0h9IJ8lVwyTrsLX_aw",
        "authPath": "/auth/google",
        "callbackURL": "/auth/google/callback",
        "scope": "https://www.googleapis.com/auth/plus.login",
        "successRedirect": "/",
        "failureRedirect": "/"
    }
}'