react-native - React-native BottomTab 导航器中的进度对话框

Question

我正在对我的应用程序使用 react-native createbottomtab 导航器。这里我有 4 个选项卡，1.Home，2.Profile 3.Sync 和 4.Settings。在这里，我在单击“同步”选项卡时显示了警报框。除了同步选项卡，我使用了屏幕（类组件）。但是在同步中我不想导航到屏幕所以我在这里使用了功能我需要显示进度对话框以单击同步警报确定按钮。但我面临的问题是在功能中我无法使用“进度”对话框。任何人都可以帮助我如何在带有底部标签的 react-native 中做到这一点。

// SyncScreen.js 
import { Alert } from 'react-native';

export default function SyncScreen() {
  Alert.alert("Information", "Do you want to Sync ", [
    {
      text: "Cancel",
      onPress: () => {
        console.log("Cancel Pressed");
      }
    },
    {
      text: "OK",
      onPress: () => {
        //Here i need to show the progress bar
      }
    }
  ]);
}

export default const LoggedInNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeStack
    },
    Profile: {
      screen: ProfileStack
    },
    Sync: {
      screen: () => null,
      navigationOptions: {
        title: "Sync",
        tabBarOnPress: () => {
          {
            SyncScreen();
          }
        }
      }
    },
    Settings: {
      screen: SettingsStack,
      navigationOptions: {
        title: "Setting"
      }
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarOptions: {
        activeTintColor: "#0A3D6A",
        inactiveTintColor: "gray"
      }
    })
  }
);

标签： react-native

Answer 1

解决您的问题的唯一想法是导航到 SyncScreen 并在进度条完成时导航回来。

像这样的东西：

// SyncScreen.js 
import { Alert } from 'react-native';
import * as Progress from 'react-native-progress';


export default function SyncScreen({navigation}) {

  const [progressBarValue, setProgressBarValue] = useState(null);

  useEffect(() => {
    if (progressBarValue >== 1) {
      // full progressBar, goBack to privious screen
      navigation.navigate.goBack();
    }
  }, [progressBarValue])

  useEffect(() => {
    Alert.alert("Information", "Do you want to Sync ", [
    {
      text: "Cancel",
      onPress: () => {
        console.log("Cancel Pressed");
        navigation.navigate.goBack();
      }
    },
    {
      text: "OK",
      onPress: () => {
        setProgressBarValue(0)
        setInterval(() => {
          setProgressBarValue(prevValue => prevValue + 0.1)
        }, 500);
      }
    }
  ]);
  }, [])


  return null !== progressBarValue ? <Progress.Bar progress={progressBarValue} width={200} /> : null;
}

export default const LoggedInNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeStack
    },
    Profile: {
      screen: ProfileStack
    },
    Sync: {
      screen: () => SyncScreen,
      navigationOptions: {
        title: "Sync"
      }
    },
    Settings: {
      screen: SettingsStack,
      navigationOptions: {
        title: "Setting"
      }
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarOptions: {
        activeTintColor: "#0A3D6A",
        inactiveTintColor: "gray"
      }
    })
  }
);