2018年7月1日 星期日

[React Native]看著文件跌跌撞撞-Props


1.在模擬器上按ctrl+M ,可以選取
   Reload→重新整理
   Enable Live Reload →一存檔就重新整理(但我覺得好容易當掉)
2.模組化思考
//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Greeting from './components/Greeting'

export default class App extends React.Component {
  render() {
    return (
      <Greeting name="Jerry"></Greeting>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
//components/Greeting.js
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
    render() {
        return (
            <Text style={text}>Hello {this.props.name}!</Text>
        );
    }
}

let text = {
    paddingTop:50
}

export default Greeting;


沒有留言:

張貼留言