Question

我最近开始创建我的第一个React Native应用程序，一切都进展顺利，直到我需要编辑应用程序的状态以呈现不同的页面，具体取决于用户在菜单中按下的按钮。我可以通过菜单组件正确调用函数（toMerchLink）。我甚至添加了一个＆＃34;警报＆＃34;测试它是否会起作用。

以下是我的菜单组件：

import React from "react";
import { StyleSheet, Text, View, Butto } from "react-native";
import BottomNavigation, { Tab } from "react-native-material-bottom-navigation";
import Icon from 'react-native-vector-icons/MaterialIcons'

class FooterMenu extends React.Component {

  viewedTab = 0

  toMerchLink = () => {

        this.setState({
            page: 'merch'
          });



        alert('Should go to Merch now.')
        this.viewedTab = 1;
    }

  render() {
    return (
      <BottomNavigation
        activeTab={this.viewedTab}
        labelColor="white"
        rippleColor="white"
        style={{
          height: 56,
          elevation: 8,
          position: "absolute",
          left: 0,
          bottom: 0,
          right: 0
        }}
      >

        <Tab
          barBackgroundColor="#37474F"
          label="Home"
          icon={<Icon size={24} color="white" name="home"/>}

        />
        <Tab
          barBackgroundColor="#00796B"
          label="Merch"
          icon={<Icon size={24} color="white" name="shopping-cart"/>}
          onPress={() => this.toMerchLink()}
        />
        <Tab
          barBackgroundColor="#5D4037"
          label="Settings"
          icon={<Icon size={24} color="white" name="book" />}
        />

      </BottomNavigation>
    );
  }
}

export default FooterMenu;

这是我的主要App.js，它根据状态存储显示内容的逻辑。抱歉，如果这看起来很草率，但我只是想让它发挥作用，一旦我理解了它，我会改进它。

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import ajax from "./src/ajax";
import CoinList from "./src/components/CoinList";
import FooterMenu from './src/components/Menu';

export default class App extends React.Component {
  /*state = {
    coins: [],
    page: 'merch'
  };*/

  constructor(){
    super();
    this.state = {
      coins: [],
      page: 'home'
    }
}
  async componentDidMount() {
    const coins = await ajax.fetchInitialCoins();
    this.setState({ coins });
  }
  render() {

    if (this.state.page == "home") {
    return (
      <View style={styles.container}>
        {this.state.coins.length > 0 ? (
          <CoinList coins={this.state.coins} />

        ) : (
          <Text style={styles.header}>Simplebits</Text>
        )}
        <FooterMenu />
      </View>
    );

  }

  if (this.state.page == "merch") {
    return (
      <View style={styles.container}>
        <Text>Merch page</Text>
        <FooterMenu />
      </View>
    );

  }

  if (this.state.page == "settings") {
    return (
      <View style={styles.container}>
        <Text>Settings page</Text>
        <FooterMenu />
      </View>
    );

  }

  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  header: {
    fontSize: 40
  }
});

我一直试图解决这个问题很长一段时间，但我尝试的任何东西似乎都没有用。这可能是一个非常简单的修复。希望被指向正确的方向。提前谢谢！

Answer 1

问题是，标签按下处理程序（toMerchLink()）正在更新FooterMenu组件的状态，并且您有条件地在App组件中呈现组件。当用户按Tab键时，您应该更新App组件的状态，而不是FooterMenu组件的状态。

因此，更改将是将tabPressHandler传递给FooterMenu组件，并在用户按Tab键时调用它。在tabPressHandler更改状态App组件中更新当前page。

请考虑以下摘录

<强> FooterMenu

class FooterMenu extends React.Component {
    constructor(props) {
      super(props);
      this.state={ currentTab: 0}
    }
    ...
    render() {
      return (
        <BottomNavigation
          activeTab={this.state.currentTab}
          labelColor="white"
          rippleColor="white"
          style={{
            height: 56,
            elevation: 8,
            position: "absolute",
            left: 0,
            bottom: 0,
            right: 0
          }}
        >
          <Tab
            ...
            onPress={() => {
                this.setState({
                    currentTab: 0
                });
                this.props.onPressHandler('home');
            }}
          />
          <Tab
            ...
            onPress={() => {
                this.setState({
                    currentTab: 1
                });
                this.props.onPressHandler('merch');
            }}
          />
          <Tab
            ...
            onPress={() => {
              this.setState({
                currentTab: 2
              });
              this.props.onPressHandler('settings');
            }}
          />
      </BottomNavigation>
   );
  }
}

应用

export default class App extends React.Component { ... tabPressHandler = (page) => { this.setState({ page }); } ... render() { ... if (this.state.page == "merch") { ... <FooterMenu onPressHandler={this.tabPressHandler}/> } if (this.state.page == "settings") { ... <FooterMenu onPressHandler={this.tabPressHandler}/> } } }

注意：尝试使用任何路由库，导航会更容易。

希望这会有所帮助！

Answer 2

根据Prasun Pal的建议，我最终调查了一个路由库，最后我使用了＆＃39; React Navigation＆＃39;我花了几分钟才实现它，现在一切都运转良好！

React Native的功能不会更新状态/不会更改UI

2 个答案: