Question

所以我在导航到特定屏幕时出现问题，我想在按下当前屏幕上的ListItem时从当前屏幕转到其他屏幕。但当我按下该项目时，没有任何反应。

这是我的代码：

文件夹练习 - ＆gt; index.js

import React, {Component} from 'react';
import Exercises from './Exercises';
import ExercisePushUps from './ExercisePushUps';
import {StackNavigator} from 'react-navigation';

export default (DrawNav = StackNavigator({
  ExercisePushUps: {screen: ExercisePushUps}
}));

文件夹练习 - ＆gt; ExercisePushUps.js

import React from "react";
import { StatusBar } from "react-native";
import {Drawer} from 'native-base';
import {Button, Text, Container, Card, CardItem, Body, Content, Header, Title, Left, Icon, Right, List, ListItem, Thumbnail} from "native-base";
import LocalizedStrings from 'react-native-localization';
import {DrawerNavigator, NavigationAction} from 'react-navigation';
import SideBar from '../SideBar/SideBar';
export default class ExercisePushUps extends React.Component {
  render() {  
    return (
      <Container>
        <Header androidStatusBarColor="#5D4037" style={styles.headerStyle}>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.navigate("DrawerOpen")}
            >
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>Test</Title>
          </Body>
          <Right />
        </Header>


        <Content>

        </Content>
      </Container>
    );
  }
}

const styles = {
  headerStyle: {
    backgroundColor: '#795548'
}
}

文件夹练习 - ＆gt; Exercises.js（ListItem位于此处）

import React from "react";
import { StatusBar } from "react-native";
import {Drawer} from 'native-base';
import {Button, Text, Container, Card, CardItem, Body, Content, Header, Title, Left, Icon, Right, List, ListItem, Thumbnail, Separator } from "native-base";
import LocalizedStrings from 'react-native-localization';
import {DrawerNavigator, NavigationAction} from 'react-navigation';
import SideBar from '../SideBar/SideBar';
import { StackNavigator } from "react-navigation";
import ExercisePushUps from './ExercisePushUps';

export default class Exercises extends React.Component {
  render() {  
    return (
      <Container>
        <Header androidStatusBarColor="#5D4037" style={styles.headerStyle}>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.navigate("DrawerOpen")}
            >
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>{strings.toolbarTitle}</Title>
          </Body>
          <Right />
        </Header>


        <Content>
        <Separator bordered style={styles.separatorStyle}>
            <Text>{strings.separator1}</Text>
          </Separator>

          <ListItem style={styles.listItemStyle} onPress={() => this.props.navigation.navigate("ExercisePushUps")}>
          <Thumbnail style={styles.imageStyle} square size={65} source={ChestImg1} />
              <Body>
                <Text style={styles.textTitleStyle}>{strings.chest1}</Text>
              </Body>
          </ListItem>
        </Content>
      </Container>
    );
  }
}

所以当我按下列表上的那个项目时，绝对没有任何反应。

我做错了什么？

Answer 1

<ListItem/> onPress工作正常。粘贴修改后的代码

index.js

import React, { Component } from 'react';
import Exercises from './Exercises';
import ExercisePushUps from './ExercisePushUps';
import { StackNavigator } from 'react-navigation';

export default (DrawNav = StackNavigator({
  ExercisePushUps: { screen: ExercisePushUps },
  Exercises: { screen: Exercises }
}, {
    navigationOptions: { header: null }
  }));

Exercises.js

import React from "react";
import { StatusBar } from "react-native";
import { Drawer } from 'native-base';
import { Button, Text, Container, Card, CardItem, Body, Content, Header, Title, Left, Icon, Right, List, ListItem, Thumbnail, Separator } from "native-base";
import { DrawerNavigator, NavigationAction } from 'react-navigation';
import { StackNavigator } from "react-navigation";
import ExercisePushUps from './ExercisePushUps';

export default class Exercises extends React.Component {
    render() {
        return (
            <Container>
                <Header androidStatusBarColor="#5D4037" >
                    <Left>
                        <Button
                            transparent>
                            <Icon name="menu" />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Exercises</Title>
                    </Body>
                    <Right />
                </Header>
                <Content>
                    <Separator bordered >
                        <Text>Separator 1</Text>
                    </Separator>
                    <ListItem style={{ marginLeft: 0 }} onPress={() => this.props.navigation.navigate("ExercisePushUps")}>
                        <Thumbnail square size={65} source={require('./logo.png')} />
                        <Body>
                            <Text>Text 1</Text>
                        </Body>
                    </ListItem>
                </Content>
            </Container>
        );
    }
}

ExercisePushUps.js

import React from "react";
import { StatusBar } from "react-native";
import { Drawer } from 'native-base';
import { Button, Text, Container, Card, CardItem, Body, Content, Header, Title, Left, Icon, Right, List, ListItem, Thumbnail } from "native-base";
import { DrawerNavigator, NavigationAction } from 'react-navigation';
export default class ExercisePushUps extends React.Component {
    render() {
        return (
            <Container>
                <Header androidStatusBarColor="#5D4037">
                    <Left>
                        <Button
                            transparent
                        >
                            <Icon name="menu" />
                        </Button>
                    </Left>
                    <Body>
                        <Title>ExercisePushUps</Title>
                    </Body>
                    <Right />
                </Header>
                <Content>
                    <Button
                        transparent
                        onPress={() => this.props.navigation.navigate("Exercises")}>
                        <Text> Go to screen Exercises</Text>
                    </Button>
                </Content>
            </Container>
        );
    }
}

const styles = {
    headerStyle: {
        backgroundColor: '#795548'
    }
}

的Gif

React Native Native Base ListItem onPress方法

1 个答案: