Tutorial Pemrograman Dasar: React Native : Membuat Header Dinamis Memanfaatkan Props

Setelah ada permulaan dengan memulai membuat project React Native disini kita coba lanjutkan dengan membuat header Dinamis dengan memanfaatkan props dari React. Untuk membuat project React ikuti tutorial Memulai pengembangan React Native Disini.

Kita bisa membuat setiap page dengan menggunakan header, namun kita akan mencoba membuatnya dengan file terpisah dan melakukan perubahan text dari header tersebut dengan memanfaatkan Props. Langsung saja oke

Membuat header.js

Kita buat satu folder dengan nama components di dalam direktori project, lalu buat satu buah file dengan nama header.js

Struktur File header.js masrahman28

Lalu isikan header.js dengan coding berikut

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

const styles = {
 textStyle: {
  fontSize: 20
 },
 headerStyle: {
  backgroundColor: '#F8F8F8',
  justifyContent: 'center',
  alignItems: 'center',
        height: 40,
        marginTop: 20,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.2
 }
};

const Header = (props) => {
    const { textStyle, headerStyle } = styles;
    return (
        <View style={headerStyle}>
            <Text style={textStyle}>{props.textHeader}</Text>
        </View>
    );
};

export default Header;

pada line 24 props.textHeader merupakan parameter yang dikirimkan oleh pemanggil component Header Kita contohkan di file App.js silahkan buka dan sesuaikan codingnya dimana nanti header pemanggilannya seperti line 16 di bawah ini

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { View } from 'react-native';
import Header from './components/header';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View>
        <Header textHeader={'Ini Header'} />
      </View>
    );
  }
}

Selesai sudah dan jika kita jalankan maka akan muncul

Header Dinamis React Native masrahman28

Tutorial Pemrograman Dasar

Halaman

27 Mar 2018

React Native : Membuat Header Dinamis Memanfaatkan Props

Tidak ada komentar:

Posting Komentar