React Native Note：Custom Components

發表於 更新於 分類於 ， 閱讀次數： Disqus： 文章字數： 152 所需閱讀時間 ≈ 1 分鐘

構建自己的 React Native 樂高。

Custom Components

想創建一個自定義組件需要建立類似如下的函式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />
    </View>
  );
};

export default Cat;

這樣可以將 Cat 在其他地方以 JSX 語法呼叫如下

1
2
3
4
5
6
7
8
9
10
11
12
const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
  );
};

export default Cafe;

若要讓自定義組建使用外部傳入的參數，需要定義並指定 props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
type CatProps = {
  name: string;
};

const Cat = (props: CatProps) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
};

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
};

export default Cafe;