1

在我的 react-native 应用程序中，我有一个导入三个不同选项卡视图的屏幕。我遇到的一个问题是，在其中一个选项卡（SessionsTab选项卡）上，如果进行了某个用户操作，我会alert弹出一个。

现在，问题是，如果用户alert在SessionsTab选项卡中关闭它，然后导航到DetailsTab选项卡，则alert重新打开/重新出现，并且必须再次单击它才能清除它。我怎样才能防止这种情况发生？

注意：我正在使用react-native-tab-view标签。

这是我在屏幕中用于呈现选项卡的代码：

  render() {
    return (
      <SafeAreaView style={styles.layout.safeAreaView}>
        <View style={styles.layout.flexColumn}>
          <View style={styles.subHeader.container}>
            <View style={styles.subHeader.subContainer}>
              <Text style={styles.subHeader.service}>{convertService(this.props.client?.service)}</Text>
              <TextInput
                style={styles.subHeader.heroText}
                placeholder="Tap here to share something about this client."
                placeholderTextColor={styles.colors.textPlaceholder}
                maxLength={50}
                onChangeText={(text) => this.props.updateHeroNote(this.props.client?.id, text)}
                value={this.props.client?.heroNote ? this.props.client?.heroNote?.value || '' : ''}
              />
              <View style={styles.subHeader.details}>
                <View style={styles.layout.flexRow}>
                  <FontAwesome name='language' size={15} color={styles.colors.textInverse} style={{ marginRight: 10 }} />
                  <Text style={{
                    color: styles.colors.textInverse,
                    fontSize: 15,
                  }}>{this.props.client?.primaryLanguage}</Text>
                </View>
                <View style={styles.layout.flexRowJustifyEnd}>
                  <FontAwesome name='birthday-cake' size={15} color={styles.colors.textInverse} style={{ marginRight: 10 }} />
                  <Text style={{
                    color: styles.colors.textInverse,
                    fontSize: 15,
                  }}>{moment(this.props.client?.dateOfBirth).format('MMM Do YYYY')}</Text>
                </View>
              </View>
            </View>
          </View>
          <View
            style={{
              height: 5,
              backgroundColor: styles.colors.primary,
            }}
          />
          <TabView
            swipeEnabled={false}
            navigationState={this.state}
            renderScene={SceneMap({
              sessions: () => SessionsTab(this.props),
              details: () => DetailsTab(this.props),
              goals: () => GoalsTab(this.props),
            })}
            onIndexChange={index => this.setState({ index })}
            renderTabBar={this.renderTabBar}
            tabBarPosition='bottom'
            initialLayout={{ flex: 1 }}
          />
        </View>
      </SafeAreaView>
    );
  }
}

一个示例alert如下所示：

Alert.alert(
  'Out of Sessions',
  'There are no sessions available for this client.',
  [
    {
      text: 'Cancel',
      onPress: () => { },
      style: 'cancel',
    },
    {
      text: 'Create Session',
      onPress: async () => {
        await createSession(option.customKey, props);
      },
    },
  ],
  {cancelable: false},
);

return;
4

0 回答 0