Question

我是反应原生的新手。在我的应用程序中，我在App.js中定义了DrawerNavigator和StackNavigator，其中DrawerNavigator工作正常。但是stackNavigator在open new screen中引起了问题。

我已经搜索了这个问题更长时间但没找到解决方案，任何伙伴都可以帮助我解决这个问题吗？

App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  ScrollView,
  AppRegistry,
} from 'react-native';
import {
  Container,
  Content,
  Header,
  Body,
  Icon,
  List,
  ListItem,
  Button,
  Separator
} from 'native-base';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator, DrawerItems } from 'react-navigation';

import LatestDeals from './src/LatestDeals.js';
import PDetails from './src/PDetails';
import FeaturedDeals from './src/FeaturedDeals.js';



class App extends Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }
  componentWillMount() {
    this.loadFonts();
  }
  async loadFonts() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf")
    });
    this.setState({ isReady: true });
  }
  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return (
        <MyApp />
    );
  }
}

const CustomDrawerContentComponent = (props) => (
  <Container>
    <Header style={{ height: 200 }}>
      <Body>
        <Image
          style={styles.drawerImage}
          source={require('./assets/shoppy-5.png')} />
      </Body>
    </Header>
    <Content>
      <DrawerItems {...props} />
    </Content>
  </Container>
);

const Deals = StackNavigator({
  First: {screen:LatestDeals},
  Second: {screen:PDetails},
},
{
initialRouteName:'First',
}
)


const MyApp = DrawerNavigator({
  LatestDeals: {
    screen: LatestDeals, navigationOptions: { title: 'Latest Deals' }
  },
  FeaturedDeals: {
    screen: FeaturedDeals, navigationOptions: { title: 'Featured Deals' }
  },

}, {
    initialRouteName: 'LatestDeals',
    drawerPosition: 'left',
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
});


styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  drawerImage: {
    height: 200,
    width: 200,
  },
});

export default App;

从我的第一个DrawerNavigator屏幕我想在按钮onPress上使用StackNavigator打开新屏幕，但它不起作用。

LatestScreen.js

 import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      StatusBar,
      Image,
      ListView,
      ScrollView
    } from 'react-native';
    import { DrawerNavigator } from 'react-navigation';
    import {
      Icon,
      Button,
      Container,
      Header,
      Content,                                             
      Left,
      Right,
      Body,
      Title,
     } from 'native-base';


    class LatestDeals extends Component {

      constructor(){
        super();
        this.state={
          dataSource: new ListView.DataSource({
            rowHasChanged:(r1, r2) => r1!=r2
          }),
            link: 'url',
        }
      }

      componentDidMount(){
        fetch(this.state.link)
        .then((response) => response.json())
        .then((responseJson) => {
          data = responseJson;
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(data.data),
          })
        })
        .catch((error) =>{
          console.error(error);
        });
      }

      static navigationOptions = {
        drawerIcon: (
          <Icon name='apps' />
        )
      }



      render() {
       return (
          <Container>
            <Header style={{ height: 24, elevation: 0 }}>
              <StatusBar barStyle="light-content"/>
            </Header>

            <Header style={{ elevation: 0 }}>
              <Left>
                <Button transparent>
                  <Icon name='menu' onPress={() =>
                  this.props.navigation.navigate('DrawerOpen')} />
                </Button>
              </Left>

              <Body>
                <Title>Shoppy</Title>
              </Body>

              <Right>
                <Button transparent>
                  <Icon name='search' onPress={() => this.props.navigation.navigate('Second')}/>
                </Button>

                <Button transparent>
                  <Icon name='more' />
                </Button>
              </Right>

            </Header>

              <ScrollView>
                <ListView
                  dataSource={this.state.dataSource}
                  renderRow={(rowData)=>
                  <View style={styles.Card}>

                    <Text style={{}}>
                      Name : {rowData.name}
                    </Text>

                    <Image style={styles.Image}
                      source={{uri:rowData.image_name}}
                    />

                    <Text style={{}}>
                      Price : {rowData.product_price}
                    </Text>

                    <Text style={{}}>
                      Discount : {rowData.discount}
                    </Text>

                  </View>
                  }
                />
              </ScrollView>

          </Container>
        );
      }
    }


    const styles = StyleSheet.create({
      container: {
      },

      Card: {
        height: 265,
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#ddd',
        borderBottomWidth: 1,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 2,
        elevation: 1,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10,
        padding: 5,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        position: 'relative',
      },

      Image: {
        height: 200,
        flex: 1,
      },
    });
    export default LatestDeals;

在本地使用堆栈导航器打开新屏幕中的问题

0 个答案: