1

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

有没有人对最好的方法有好的建议？

谢谢！

4

1 回答 1

0

以下代码在 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
      },
    );

你可以走了！

希望这可以帮助。

于 2019-07-15T05:03:00.713 回答