React Native / Using Views, Text, Style, state

 

 

React Native 

 

App.js 파일 구성

① 해당 파일에서 사용할 컴포넌트 import 하는 부분

② 실제 프로그램 작성. return안에 내용 작성. <View>태그 안에 해당내용을 작성

③ view의 style은 해당부분에서 작성 후 적용

 

 

 

 

---

 

 

 

 

 

 

 

App.js

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  const [name, setName] = useState('shaun');
  const [person, setPerson] = useState({ name: 'mario', age: 40}) # 객체처럼 사용
  
  #함수
  const clickHandler = () => {
    setName('chun-li');
    setPerson({name: 'luigi', age: 45});
  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text> 
      <View style={styles.header}>
        <Text style={styles.boldText}>Hello, World!</Text>
      </View>
      <View style={styles.body}>
        <Text style={styles.boldText}>hahaha<Text>test</Text></Text>
        <Text>hahaha</Text>
        <Text>hahaha</Text>
      </View>
      <StatusBar style="auto" />
      <Text>My name is {name}</Text>
      <Text>His name is {person.name} and his age is {person.age}</Text>
      <View style={styles.buttonContainer}>
        <Button title='update state' onPress={clickHandler} /> #button 사용위해 import Button 추가
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  header:{
    backgroundColor:'pink',
    padding: 20,
  },
  boldText:{
    fontWeight:'bold',
  },
  body:{
    backgroundColor:'yellow',
    padding: 20,
  },
  buttonContainer:{
    magrinTop: 20
  }
});

 

 

클릭 전 / 클릭 후