Question

我正在尝试构建一个类似于Snapchat界面的界面，您可以在其中向左/向右/向上滑动以访问其他屏幕/导航器。目前，我正在使用DrawerNavigator，但有点怪，因为我在另一个DrawerNavigator之上使用了DrawerNavigator。

有人对执行此操作的最佳方法有很好的建议吗？

谢谢！

Answer 1

下面的代码隐含了在20行之内声明性地在视图之间进行简单的4向滑动导航，没有Javascript！

import Swiper from 'react-native-swiper'
import randomcolor from 'randomcolor'

const {
  View,
  Text,
  StyleSheet
} = React

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  view: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})

class TitleText extends React.Component {
  render() {
    return (
      <Text style={{ fontSize: 48, color: 'white' }}>
        {this.props.label}
      </Text>
    )
  }
}

class Home extends React.Component {

  viewStyle() {
    return {
      flex: 1,
      backgroundColor: randomcolor(),
      justifyContent: 'center',
      alignItems: 'center',
    }
  }

  render() {
    return (
      <Swiper
        loop={false}
        showsPagination={false}
        index={1}>
        <View style={this.viewStyle()}>
          <TitleText label="Left" />
        </View>
        <Swiper
          horizontal={false}
          loop={false}
          showsPagination={false}
          index={1}>
          <View style={this.viewStyle()}>
            <TitleText label="Top" />
          </View>
          <View style={this.viewStyle()}>
            <TitleText label="Home" />
          </View>
          <View style={this.viewStyle()}>
            <TitleText label="Bottom" />
          </View>
        </Swiper>        
        <View style={this.viewStyle()}>
          <TitleText label="Right" />
        </View>
      </Swiper>

    )
  }
}

export default Home

很遗憾，Android尚不支持垂直导航。

我在上一个项目中使用了react-native-swiper组件，并且喜欢它！我想我可以进行一些调整以满足我的要求。

您可以清楚地看到，我已将屏幕和导航文件分隔在一个单独的文件夹中。

这是我的根导航器文件：

import {
  createStackNavigator
} from 'react-navigation';

import Login from '../screens/Login';
import SplashScreen from '../screens/SplashScreen';
import HomeNavigation from './HomeNavigation';

export default RootNavigation = createStackNavigator({
  // Settings:UserProfile,
  SplashScreen: SplashScreen,
  Login: Login,
  DrawerNavigation: HomeNavigation
}, {
  headerMode: 'none',
});

这是我的根导航器文件：在这里，我声明了所有屏幕并将其链接到根导航器

import React, {
  Component
} from 'react';
import {
  Text,
  View,
  Image,
  SafeAreaView,
  ScrollView,
  Dimensions,
  AsyncStorage,
  ImageBackground,
  TouchableOpacity,
  Platform
} from 'react-native';
import {
  Icon
} from 'native-base';
import {
  createStackNavigator,
  createDrawerNavigator,
  DrawerItems,
  createSwitchNavigator,
  Header
} from 'react-navigation';
import AppDataStorage from '../helper/AppDataStorage';

import Colors from '../config/Colors';
import {
  RNToasty
} from 'react-native-toasty';

import Home from '../screens/Home';
import Contact from '../screens/Contact';
import AboutUs from '../screens/AboutUs';
import Search from '../screens/Search';
import MyProfile from '../screens/MyProfile';

import {
  getStatusBarHeight
} from 'react-native-status-bar-height';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
var drawerWidth = ((width * 0.75) > 350) ? 350 : (width * 0.75);

const ImageHeader = props => ( <
  View style = {
    {
      backgroundColor: '#eee'
    }
  } >
  <
  LinearGradien style = {
    {
      height: '100%',
      width: '100%'
    }
  }
  start = {
    {
      x: 0,
      y: 1
    }
  }
  end = {
    {
      x: 1,
      y: 0
    }
  }
  colors = {
    ['#4c669f', '#3b5998', '#192f6a']
  }
  /> <
  Header { ...props
  }
  style = {
    {
      backgroundColor: 'transparent'
    }
  }
  /> < /
  View >
);

const headerOptions = (props) => {
  return {
    // header: (props) => <ImageHeader {...props} />,
    headerStyle: {
      backgroundColor: Colors.transparent,
      paddingTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
      height: Header.HEIGHT + (Platform.OS === 'ios' ? 0 : getStatusBarHeight()),
    },
    headerTintColor: Colors.white,
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerMode: 'float',
    headerLeft: < Icon
    onPress = {
      () => props.navigation.openDrawer()
    }
    name = "menu"
    type = 'MaterialIcons'
    style = {
      {
        color: 'white',
        marginLeft: 10
      }
    }
    />,
  }
};

class homeDrawerComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      user: null
    };
  }

  async componentDidMount() {
    let user = await AppDataStorage.getUser();
    console.log("user drawer", user);
    await this.setState({
      user: user
    });
  }

  render() {

    const email = this.state.user ? this.state.user.email : '';
    const name = this.state.user ? (this.state.user.firstName + ' ' + this.state.user.lastName) : '';

    return ( <
      View style = {
        {
          flex: 1
        }
      } >
      <
      ImageBackground resizeMode = 'cover'
      source = {
        require('../assets/images/Cover.png')
      }
      style = {
        {
          flexDirection: 'column',
          justifyContent: 'flex-start',
          alignItems: 'center',
          height: 200,
          marginBottom: 32
        }
      } >
      <
      View style = {
        {
          width: 80,
          height: 80,
          backgroundColor: Colors.white,
          marginTop: 40,
          borderRadius: 40
        }
      } >
      <
      Image source = {
        require('../assets/images/drawer-logo.png')
      }
      style = {
        {
          width: 80,
          height: 80,
        }
      }
      resizeMode = 'contain' / >
      <
      /View> <
      Text style = {
        {
          marginTop: 10,
          color: Colors.white,
          fontSize: 14,
        }
      } > {
        name
      } <
      /Text> <
      Text style = {
        {
          color: Colors.white,
          fontSize: 14,
        }
      } > {
        email
      } <
      /Text> < /
      ImageBackground > <
      ScrollView showsVerticalScrollIndicator = {
        false
      } >
      <
      DrawerItems activeBackgroundColor = '#1a9eae1a'
      activeTintColor = {
        Colors.secondaryColor
      }
      inactiveTintColor = {
        Colors.primaryColor
      }
      labelStyle = {
        {
          color: Colors.text2
        }
      } { ...this.props
      }
      /> <
      TouchableOpacity onPress = {
        () => {
          AsyncStorage.clear();
          OneSignal.setSubscription(false);
          RNToasty.Info({
            title: 'You have been logged out.'
          })
          this.props.navigation.navigate('SplashScreen');
        }
      } >
      <
      View style = {
        {
          padding: 16,
          flexDirection: 'row',
          alignItems: 'center'
        }
      } >
      <
      Icon

      type = "MaterialCommunityIcons"
      name = "logout"
      style = {
        {
          fontSize: 24,
          color: Colors.primaryColor,
          fontWeight: 'bold'
        }
      }
      /> <
      Text style = {
        {
          fontSize: 14,
          color: Colors.text2,
          fontWeight: 'bold',
          marginLeft: 32
        }
      } > Sign Out < /Text> < /
      View > <
      /TouchableOpacity> < /
      ScrollView > {
        /* <TouchableOpacity onPress={() => {
                        AsyncStorage.clear();
                        RNToasty.Info({ title: 'You have been logged out.' })
                        this.props.navigation.navigate('SplashScreen');
                    }}> */
      } {
        /* <Icon
                            onPress={() => {
                                AsyncStorage.clear();
                                OneSignal.setSubscription(false);
                                RNToasty.Info({ title: 'You have been logged out.' })
                                this.props.navigation.navigate('SplashScreen');
                            }}
                            type="MaterialCommunityIcons"
                            name="logout"
                            style={{ color: Colors.secondaryColor, padding: 16, textAlign: 'left', marginBottom: 20, fontWeight: 'bold' }}>   Logout</Icon> */
      } <
      /View>
    )
  }
}

const HomeStack = createStackNavigator({
  Home: Home,
  Search: Search,
  Contact: Contact,

}, {
  defaultNavigationOptions: headerOptions
});

HomeStack.navigationOptions = ({
  navigation
}) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 2) {
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
  };
};

const AboutUsStack = createStackNavigator({
  AboutUs: AboutUs,
}, {
  defaultNavigationOptions: headerOptions
});

export default HomeNavigation = createDrawerNavigator({
      Home: {
        screen: HomeStack,
        navigationOptions: {
          drawerLabel: 'Home',
          drawerIcon: ({
            tintColor
          }) => ( <
            Icon type = "FontAwesome5"
            name = "home"
            style = {
              {
                fontSize: 20,
                color: tintColor
              }
            }
            />
          )
        }
      },
      {
        header: null,
        contentComponent: homeDrawerComponent,
        // drawerWidth
      },
    );

你很好！

希望这会有所帮助。

如何在React Native中实现滑动以访问不同的导航屏幕？

1 个答案: