06.05. React Navigation: Başlık Button'ları

Bu bölüm, başlık kısmına Button oluşturma ve Button üzerinden işlem yapmaya ayrılmıştır.

Button state bölümünde tutulan bir değişkeni arttıracak ve arttırma sonucu bir Text bileşeni içinde gösterilecektir. Ekran7.js adındaki dosya içeriği:

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

type Props = {};
export default class Ekran7 extends Component<Props> {
  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Ekran 7',
      headerRight: (
        <Button
          onPress={navigation.getParam('increaseCount')}
          title="+1"
          color="#000"
        />
      ),
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  state = {
    count: 0,
  };

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <View>
        <Text>{this.state.count}</Text>
      </View>
    );
  }
}

import React, {Component} from 'react';

import {Text, View, Button} from 'react-native';

type Props = {};

export default class Ekran7 extends Component<Props> {

static navigationOptions = ({ navigation }) => {

return {

title: 'Ekran 7',

headerRight: (

<Button

onPress={navigation.getParam('increaseCount')}

title="+1"

color="#000"

};

componentDidMount() {

this.props.navigation.setParams({ increaseCount: this._increaseCount });

}

state = {

count: 0,

};

_increaseCount = () => {

this.setState({ count: this.state.count + 1 });

};

render() {

return (

<View>

<Text>{this.state.count}</Text>

</View>

);

}

headerRight başlık kısmının sağ kısmını işaret eder. Bu kısma bir Button eklenmiş ve increaseCount değişkenine bağlanmıştır. Diğer taraftan componentDidMount “this._increaseCount” ile increaseCount değişkenini işaret eder. _increaseCount fonksiyonu State bölümündeki count değişkenini günceller. render kısmında sonuç bir Text içinde gösterilir.