如何为react-native-floating-action各页面设置distanceToEdge及代码修复

看起来你已经找对了核心思路，但代码没正常工作大概率是因为当前页面状态没有和导航同步，导致边距计算一直用默认值。我来帮你一步步修复：

问题根源 #

你的floatingIconEdge函数逻辑是对的，但如果currentScreen的值没有随着页面切换实时更新，组件就不会触发重渲染来应用新的边距。

修复方案 #

1. 监听导航状态，同步当前页面

首先要让组件能感知页面切换，在类组件里可以通过导航的focus事件来实时更新currentScreen：

componentDidMount() {
  // 订阅页面聚焦事件，每次页面切换时更新当前页面名称
  this.navigationListener = this.props.navigation.addListener('focus', () => {
    const currentRouteName = this.props.navigation.state.routeName;
    this.setState({ currentScreen: currentRouteName });
  });
}

componentWillUnmount() {
  // 组件卸载时取消订阅，避免内存泄漏
  this.navigationListener();
}

2. 确保边距动态生效

只要currentScreen通过setState更新，组件就会自动重渲染，floatingIconEdge函数会返回对应页面的边距值，传递给distanceToEdge属性。

3. 完整修改后的代码

class YourParentComponent extends React.Component {
  state = {
    currentScreen: ''
  };

  componentDidMount() {
    this.navigationListener = this.props.navigation.addListener('focus', () => {
      const currentRoute = this.props.navigation.state.routeName;
      this.setState({ currentScreen: currentRoute });
    });
  }

  componentWillUnmount() {
    this.navigationListener();
  }

  floatingIconEdge = () => { 
    const { currentScreen } = this.state;
    switch (currentScreen) { 
      case 'ShopScreen': 
        return { vertical: 40, horizontal: 10 };
      case 'StoreHome': 
        return { vertical: 10, horizontal: 10 };
      default: 
        return { vertical: 40, horizontal: 40 };
    } 
  };

  floatingIconVisible = () => {
    // 保留你原有的可见性判断逻辑
    return true;
  };

  render() {
    const actions = [/* 你的actions配置 */];
    return (
      <FloatingAction 
        actions={actions} 
        floatingIcon={<Icon name={'ios-help-circle-outline'} style={{ fontSize: 30, color: '#ffffff' }} />} 
        onPressItem={name => { 
          Reactotron.error({ name }); 
          NavigationService.navigate('ChatRoom');
        }} 
        distanceToEdge={this.floatingIconEdge()} 
        color={'#2cb673'} 
        visible={this.floatingIconVisible()} 
      />
    );
  }
}

额外提示 #

• 如果你用的是React Navigation v5+，获取当前路由的方式需要调整为this.props.navigation.getCurrentRoute().name。
• 确认你安装的react-native-floating-action版本支持distanceToEdge属性，部分旧版本可能用marginVertical/marginHorizontal作为参数名。

这样修改后，切换页面时浮动图标就会自动应用对应的位置设置了。

内容的提问来源于stack exchange，提问作者A.Gomathi sankar