Question

当我只使用堆栈导航器时。每当我导航到另一个屏幕时，屏幕都会重新渲染。那么如何用tab导航器做同样的事情呢？每次按下标签菜单（最喜欢的）？

截图：

代码：

const RootStack = StackNavigator(


{
    Home: {
      screen: Home,
      navigationOptions: {
        header: null
      }
    },
    Menu: {
      screen: Menu,
      navigationOptions: {
        header: null
      }
    },
  }
);

export default TabNavigator(
  {
    Home: { screen: RootStack },
    Favorite: { screen: Favorite },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `home`;
        } else if (routeName === 'Favorite') {
          iconName = `heart`;
        }

    return <Icon name={iconName} size={25} color={tintColor} />;
  },
}),
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
tabBarOptions: {
  activeTintColor: '#00a6ed',
  inactiveTintColor: '#9e9e9e',
  style: {
      backgroundColor: '#FFFFFF',
  },
},
animationEnabled: false,
swipeEnabled: false,


}
);

提前致谢！

Answer 1

react-navigation支持可用于检测焦点或模糊屏幕状态的侦听器。

addListener - 订阅导航生命周期的更新

React Navigation将事件发送到屏幕预订的组件   它们：


willBlur - 屏幕将无焦点

willFocus - 屏幕将重点关注

didFocus - 屏幕聚焦（如果有转换，转换完成）

didBlur - 屏幕未聚焦（如果有转换，转换已完成）

来自文档的示例

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);
// Remove the listener when you are done
didBlurSubscription.remove();

// Payload
{
  action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
  context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
  lastState: undefined,
  state: undefined,
  type: 'didBlur',
};

Answer 2

我在下面找到2种不同的方式，

if db_version=$(bundle exec rake db:version 2>/dev/null)
then
    if [ "$db_version" = "Current version: 0" ]; then
        echo "DB is empty"
    else
        echo "DB exists"
    fi
else
    echo "DB does not exist"
fi

OR

// call when the screen is focused
componentDidMount () {
    this._navListener = this.props.navigation.addListener('didFocus', (payload) => {
      // update based on your requirements
    });
}

Answer 3

我建议使用Hooks在更改焦点时重新渲染屏幕，该库会导出一个useIsFocused挂钩，以简化此操作
isFocused is方法可让我们检查屏幕当前是否聚焦。如果屏幕已聚焦，则返回true，否则返回false。

import { useIsFocused } from '@react-navigation/native';
import { Text } from '@react-native';

function Home() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

如果您正在使用类组件，则可以将类组件包装在功能组件中

import { useIsFocused } from '@react-navigation/native';

class Home extends React.Component {
  render() {
    // Get it from props
    const { isFocused } = this.props;
  }
}

// Wrap and export
export default function(props) {
  const isFocused = useIsFocused();

  return <Home {...props} isFocused={isFocused} />;
}

重新渲染选项卡导航器onPress反应导航

3 个答案: