Question

我使用了底部标签导航，并且使用了自定义标签导航器，为此我使用了此存储库https://github.com/nomi9995/react-native-curved-bottom-tabbar。一切工作正常，但是当我在屏幕上创建一个按钮并想导航到其他屏幕时，它正在导航，但底部选项卡没有移动到该屏幕，我附上了屏幕截图以供参考，和我的存储库https://github.com/asjadshahab/curvebottomnavigation。我找不到解决方案，请帮助

Screen One

Screen Two

  import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { RectButton, ScrollView } from 'react-native-gesture-handler';
import { enableScreens } from 'react-native-screens';
enableScreens();
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

import BottomTabScreen from './bottomTabScreen';


const SCREENS = {
  BottomTabScreen: { title: 'As React Navigation Bottom bar' },
 
};

class MainScreen extends React.Component {
  static navigationOptions = {
    title: '? Reanimated 1.x Examples',
  };

  render() {
    const data = Object.keys(SCREENS).map(key => ({ key }));
    return (
      <FlatList
        style={styles.list}
        data={data}
        ItemSeparatorComponent={ItemSeparator}
        renderItem={props => (
          <MainScreenItem
            {...props}
            onPressItem={({ key }) => this.props.navigation.navigate(key)}
          />
        )}
        renderScrollComponent={props => <ScrollView {...props} />}
      />
    );
  }
}

const ItemSeparator = () => <View style={styles.separator} />;

class MainScreenItem extends React.Component {
  _onPress = () => this.props.onPressItem(this.props.item);
  render() {
    const { key } = this.props.item;
    return (
      <RectButton style={styles.button} onPress={this._onPress}>
        <Text style={styles.buttonText}>{SCREENS[key].title || key}</Text>
      </RectButton>
    );
  }
}

function ExampleApp() {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode={'none'}>
        <Stack.Screen name="MainScreen" component={MainScreen} />
        <Stack.Screen name="BottomTabScreen" component={BottomTabScreen} />
        
      </Stack.Navigator>
    </NavigationContainer>
  );
}


const styles = StyleSheet.create({
  list: {
    backgroundColor: '#EFEFF4',
  },
  separator: {
    height: 1,
    backgroundColor: '#DBDBE0',
  },
  buttonText: {
    backgroundColor: 'transparent',
  },
  button: {
    flex: 1,
    height: 60,
    padding: 10,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

export default ExampleApp;

单击按钮时，弯曲的底部标签栏Naviagtor屏幕无法导航

0 个答案: