React Native - Sahne

Son bölümümüzde, mutable'ı nasıl kullanacağınızı gösterdik. state. Bu bölümde size devlet ile devleti nasıl birleştireceğinizi göstereceğiz.props.

Sunum bileşenleri geçerek tüm verileri almalıdır props. Yalnızca konteyner bileşenlerinde olmalıdırstate.

Konteyner Bileşeni

Şimdi bir konteyner bileşeninin ne olduğunu ve nasıl çalıştığını anlayacağız.

Teori

Şimdi kapsayıcı bileşenimizi güncelleyeceğiz. Bu bileşen durumu ele alacak ve sahne öğelerini sunum bileşenine aktaracaktır.

Konteyner bileşeni yalnızca işleme durumu için kullanılır. Görünümle ilgili tüm işlevsellik (stil vb.) Sunum bileşeninde ele alınacaktır.

Misal

Son bölümdeki örneği kullanmak istiyorsak, TextRender işlevinden bir öğe, çünkü bu öğe kullanıcılara metin sunmak için kullanıldı. Bu sunum bileşeninin içinde olmalıdır.

Aşağıda verilen örnekteki kodu inceleyelim. İthal edeceğizPresentationalComponent ve bunu render işlevine aktarın.

İthal ettikten sonra PresentationalComponentve onu render işlevine geçirirsek, sahne öğelerini geçmemiz gerekir. Sahne ekleyerek geçeceğizmyText = {this.state.myText} ve deleteText = {this.deleteText} -e <PresentationalComponent>. Şimdi, buna sunum bileşeni içinden erişebileceğiz.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

Sunum Bileşeni

Şimdi sunum bileşeninin ne olduğunu ve nasıl çalıştığını anlayacağız.

Teori

Sunum bileşenleri yalnızca kullanıcılara görüş sunmak için kullanılmalıdır. Bu bileşenlerin durumu yoktur. Tüm verileri ve işlevleri sahne olarak alırlar.

En iyi uygulama, olabildiğince çok sunum bileşeni kullanmaktır.

Misal

Önceki bölümde bahsettiğimiz gibi, sunum bileşenleri için EC6 fonksiyon sözdizimini kullanıyoruz.

Bileşenimiz sahne öğelerini alacak, görünüm öğelerini geri getirecek ve kullanarak {props.myText} ve ara {props.deleteText} kullanıcı metni tıkladığında işlev görür.

PresentationalComponent.js

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

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.updateState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

Şimdi, bizimki ile aynı işlevselliğe sahibiz Statebölüm. Tek fark, kodumuzu kapsayıcıya ve sunum bileşenine yeniden düzenlememizdir.

Uygulamayı çalıştırabilir ve metni aşağıdaki ekran görüntüsündeki gibi görebilirsiniz.

Metne tıklarsanız, ekrandan kaldırılacaktır.