Question

我有两个现有的页面，定义如下，分别是Post.js和PostSingle.js，我是从App.js上的react-navigation导入的，还添加了RootStack。问题是，我试图从左侧添加绘图导航器，在这里我可以选择导航至登录名和其他链接，Post.js是我的登录页面。

在尝试解决之前，我已经尝试过代码示例 https://reactnavigation.org/docs/en/drawer-based-navigation.html，这是灾难性的，由于我什至也无法解释，因此无法在此处发布错误。

但是，这是我的 App.js

import React, {Component} from 'react';
import { StyleSheet, View} from 'react-native';
import Post from './components/Post';
import PostSingle from './components/PostSingle';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const RootStack = createStackNavigator(
  {
    PostScreen: { screen: Post},
    PostSingleScreen:{screen: PostSingle},

  }, 

  {
    initialRouteName: "PostScreen"
  }
);

const AppNavigator = createAppContainer(RootStack);
export default class App extends Component {
  constructor(props) {
    super(props);
  };
  render() {
    return (
      <View style={styles.container}>
        <AppNavigator/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F3F3F3',
    flex: 1,
  }
});

Post.js

import React, { Component } from 'react';
import {
    ScrollView, 
    StyleSheet,
    View, 
    Text,
    TouchableOpacity
} from 'react-native';
import axios from 'axios';

export default class Post extends Component{
    constructor(props){
        super(props);
        this.state = {
            posts: []
        }
    }

    static navigationOptions =  {
        title: 'Gist Blog',
    };
     readMore = (id) => {

    this.props.navigation.navigate('PostSingleScreen', {id:id})

     } 

    componentDidMount(){
        axios.get(`http://localhost/rest_api_myblog/api/post/read.php`)
        //.then(json => console.log(json.data.data[0].id))
        .then(json => json.data.data.map(mydata =>(
            {
                title: mydata.title,
                body: mydata.body,
                author: mydata.author,
                category_name: mydata.category_name, 
                id: mydata.id 
            }
        )))
       .then(newData => this.setState({posts: newData}))
       .catch(error => alert(error))

        }

    render(){
        return (
        <View>

        <ScrollView style={styles.scrollContent}>

             {   
                 this.state.posts.map((post, index) =>(
                    <View key={index} style={styles.container}>
                        <Text style={styles.display}>
                            Author:  {post.author}
                        </Text>
                        <Text style={styles.display}>
                            Category: {post.category_name}
                        </Text>
                        <Text style={styles.display}>
                            Title: {post.title}
                        </Text>
                     <TouchableOpacity style={styles.buttonContainer}
                     onPress = {() => this.readMore(post.id)}
                     >
                        <Text style={styles.buttonText}>

                            Read More
                        </Text>
                     </TouchableOpacity>

                     </View> 
                 ))
             }

        </ScrollView>
            <View style={styles.footer}></View>
        </View>
        );
    }
}

const styles = StyleSheet.create({

 header: {
     flex: 1,
     height:40,
     marginTop:50,
     marginBottom:10,
     flexDirection: 'row', 
     justifyContent:'center',


 },
display: {
   margin: 3,
   fontSize: 16
}, 

headerText: {
    fontWeight: 'bold', 
    fontSize: 40,
    color: '#6200EE'
},

 container: {
    backgroundColor:'#efefef',
    padding: 20,
    margin: 5,
    borderRadius:20,

    justifyContent: 'center', 
    alignItems: 'center'
},
footer: {
    flex: 1,
    backgroundColor:'#000',
    marginBottom:50
}, 
buttonContainer:{
    height: 30,
    width: 200,
    marginTop: 15,
    justifyContent: 'center', 
    alignItems: 'center',
    borderRadius: 15,
    backgroundColor:'#6200EE'
},
buttonText: {
alignContent: 'center',
color: 'white'
}
});

我希望有一个抽屉，尽管我不能这样做，但是我需要帮助来解决它

Answer 1

您可以通过使用纯JavaScript材料菜单来添加菜单以进行本地响应，可以是yarn add react-native-material-menu或npm install --save react-native-material-menu

然后

添加import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';

完整的代码示例

import React from 'react';

import { View, Text } from 'react-native';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';

class App extends React.PureComponent {
  _menu = null;

  setMenuRef = ref => {
    this._menu = ref;
  };

  hideMenu = () => {
    this._menu.hide();
  };

  showMenu = () => {
    this._menu.show();
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Menu
          ref={this.setMenuRef}
          button={<Text onPress={this.showMenu}>Show menu</Text>}
        >
          <MenuItem onPress={this.hideMenu}>Menu item 1</MenuItem>
          <MenuItem onPress={this.hideMenu}>Menu item 2</MenuItem>
          <MenuItem onPress={this.hideMenu} disabled>
            Menu item 3
          </MenuItem>
          <MenuDivider />
          <MenuItem onPress={this.hideMenu}>Menu item 4</MenuItem>
        </Menu>
      </View>
    );
  }
}

export default App;

enter link description here

如何将抽屉式导航器添加到现有的反应导航中？我想创建一个带有侧栏的三个图标菜单

1 个答案: