Native Components

kim_memo·2020년 12월 20일
0

React / React-native

목록 보기
4/5

Core Components & Native Components

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

const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }5t = }
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
}
export default App;

React Fundamentals

components
component will render a TEXT element:
JSX
React and React Native use JSX, a syntax that lets you write elements inside JavaScript
props
Props is short for “properties.” Props let you customize React components.

const Cat = (props) => {
  return (
    <View>
      <Text>I am also a {props.name}</Text>
    </View>
  )
}
const App = () => {
  return (
    <View>
      <Text>Welcome</Text>
      <Cat name="Maru" />
      <Cat name="Jelly" />
      <Cat name="Cheese" />
    </View>
  );

state
While you can think of props as arguments you use to configure how components render, state is like a component’s personal data storage. State is useful for handling data that changes over time or that comes from user interaction. State gives your components memory!

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);
  return (
    <View>
      <Text>I am {props.name}, and I am {isHungry ? "hungry" : "full"}!</Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "pour me some milk, plsease" : "Thank you!"} />
    </View>
  )
}
const App = () => {
  return (
    <>
      <Cat name="Maru" />
      <Cat name="Jelly" />
    </>
  );
}

TextInput

TextInput is a Core Component that allows the user to enter text.

  • onChangeText
  • onSubmitEditting
<TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />

ScrollView

generic scrolling container that can contain mulple components and views.

<ScrollView>
...
</ScrollView>

The ScrollView works best to present a small amount of things of a limited size.

List Views

참고자료

profile
archive of study

0개의 댓글