Question

我正在开发一个应用程序，用于在 react-native 中调整钢琴。我有一个 App.js 和一些用 react-navigation 实现的屏幕。问题是，当用户不在该屏幕中时，我如何停用（或只是不呈现）组件屏幕？

这个想法是当这个屏幕组件是活动屏幕时（比如使用导航道具），我可以在活动屏幕改变时激活渲染和停用。

Tab.js，包含标签屏幕。

import React from "react";

/** Screens */
import TunerScreen from "./tunerScreen";
import Inharmonicity from "./inharmonicityScreen";
import BeatsScreen from "./beatsScreen";
/** Navigation */
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";

/** Tab */
const Tab = createMaterialBottomTabNavigator();
/*  Tabs of screen */
export default Tabs = ({
  handleSwitch,
  beatsCalc,
  inharmonicityCalc,
  inharmonicitySave,
}) => {
  return (
    <Tab.Navigator activeColor="#000" barStyle={{ backgroundColor: "white" }}>
      <Tab.Screen
        ...
      />
         // This is the component screen trying to deactivate
      <Tab.Screen
        name="Beats"
        children={() => (
          
          <BeatsScreen beatsCalc={beatsCalc} />
        )}
        options={{
          tabBarLabel: "Beats",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons
              name="blur-radial"
              color="black"
              size={26}
            />
          ),
        }}
      />

      <Tab.Screen
        ...
      />
    </Tab.Navigator>
  );
};

BeatsScreen.js（要停用的组件）。

import React, { Component, useState } from "react";
import { View, Text, Button, Switch } from "react-native";
import Note from "../src/components/note";
import { connect } from "react-redux";
import style from "../styles/style";
import Picker from "@gregfrench/react-native-wheel-picker";

var PickerItem = Picker.Item;
class BeatsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      beats: 0,
      // Prima nota
      firstNote: { name: "A", octave: 4, frequency: 440, selected: false },
      // Seconda nota
      secondNote: { name: "A", octave: 4, frequency: 440, selected: false },
      // Elemento selezionato dal picker
      selectedItem: 0,
      // Elementi del picker
      itemList: ["Terza", "Quarta", "Quinta", "Ottava", "Prima"],
    };
  }
  beatsUpdate = () => {
    this.state.beats = beatsCalc(
      this.state.firstNote,
      this.state.secondNote,
      this.state.selectedItem
    );
  };

  render() {
      if (!this.state.firstNote.selected)
        this.state.firstNote = this.props.note;
      if (!this.state.secondNote.selected)
        this.state.secondNote = this.props.note;

      this.beatsUpdate();
      return (
        <View style={{ flex: 1, flexDirection: "column" }}>
          <View style={{ flex: 1 }}>
            <View style={{ flex: 1, flexDirection: "row" }}>
              <View
                style={{
                  flex: 1,
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <Note {...this.state.firstNote} />
                <Text style={style.frequency}>
                  {this.state.firstNote.frequency.toFixed(1)} Hz
                </Text>
                {
                  <Switch
                    style={{
                      paddingTop: 50,
                      transform: [{ scaleX: 2 }, { scaleY: 2 }],
                    }}
                    value={this.state.firstNote.selected}
                    onValueChange={() => {
                      // Se la nota è stata selezionata
                      this.state.firstNote.selected =
                        !this.state.firstNote.selected;
                    }}
                  />
                }
              </View>
              <View
                style={{
                  flex: 1,
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <Note {...this.state.secondNote} />
                <Text style={style.frequency}>
                  {this.state.secondNote.frequency.toFixed(1)} Hz
                </Text>
                <Switch
                  style={{
                    paddingTop: 50,
                    transform: [{ scaleX: 2 }, { scaleY: 2 }],
                  }}
                  value={this.state.secondNote.selected}
                  onValueChange={() => {
                    // Se la nota è stata selezionata
                    this.state.secondNote.selected =
                      !this.state.secondNote.selected;
                  }}
                />
              </View>
            </View>
          </View>
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Picker
              style={{ width: 150, height: 180 }}
              lineColor="#000000" //to set top and bottom line color (Without gradients)
              lineGradientColorFrom="#008000" //to set top and bottom starting gradient line color
              lineGradientColorTo="#FF5733" //to set top and bottom ending gradient
              selectedValue={this.state.selectedItem}
              itemStyle={{ color: "black", fontSize: 26 }}
              onValueChange={(index) => {
                this.state.selectedItem = index;
                this.beatsUpdate();
              }}
            >
              {this.state.itemList.map((value, i) => (
                <PickerItem label={value} value={i} key={i} />
              ))}
            </Picker>
            <Text style={{ fontSize: 18 }}>Battimenti: </Text>
            <Text style={{ fontSize: 80, paddingTop: 1 }}>
              {this.state.beats}
            </Text>
          </View>
        </View>
      );
    
  }
}

/** Mappa lo stato (store) con le props, cosi' da poterle usare nel componente. */
const mapStateToProps = (state) => {
  const { note } = state;
  const { tunerSwitch } = state;
  return { note, tunerSwitch };
};

const mapDispatchToProps = (dispatch) => {
  return {
    startAndStop: () => dispatch({ type: "SWITCH" }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(BeatsScreen);

Answer 1

我认为如果您在标签栏的初始化中使用此选项，您可以解决您的问题 https://reactnavigation.org/docs/bottom-tab-navigator/#detachinactivescreens

提高 React Native 性能，在不使用时停用组件

1 个答案: