react-native props和state傳值

通過props,state來傳值取值,顯示在界面上

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


class Welcome extends React.Component{
    render(){
        return <Text> hello,{this.props.name}</Text>
    }
}

function App(){
    return (

        <View>
            <Welcome name="Sara"/>
            <Welcome nmae="Peng"/>
        </View>


    );
}

export  default App;

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

class Counter extends Component {
    state = {count: 0};

  componentDidMount() {
        setInterval(() => {
      this.setState({count: this.state.count + 1});
        }, 1000);
    }

    render() {
        const {count} = this.state;//對象的賦值
        const {color, size} = this.props;

        return (
            <Text style={{color, fontSize: size}}>
                {count}
            </Text>
        );
    }
}

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Counter color={'lightblue'} size={16}/>
                <Counter color={'skyblue'} size={32}/>
                <Counter color={'steelblue'} size={80}/>
                <Counter color={'darkblue'} size={140}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});