네이티브 네이티브베이스에 반응하십시오. ListItem onPress 메서드

특정 화면으로 이동하는 데 문제가 있습니다. 현재 화면의 ListItem을 누르면 현재 화면에서 다른 화면으로 이동하려고합니다. 하지만 항목을 누르면 아무 일도 일어나지 않습니다. 여기 네이티브 네이티브베이스에 반응하십시오. ListItem onPress 메서드

내 코드입니다 : ->

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} 
}));

폴더 연습하는 index.js -

폴더 연습> 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' 
} 
}

폴더 연습 -> 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> 
    ); 
    } 
}

그래서 목록의 해당 항목을 누르면 아무 일도 일어나지 않습니다.

내가 잘못 했습니까?

출처

2017-12-17 DaxHR

excersices.js에서 console.log (this.props)를 사용할 수 있습니까? https://reactnavigation.org/docs/navigators/custom 내비게이션을 어딘가에 초기화하고 탐색 용 소품을 내리고 있는지 확인하십시오. –

<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' 
    } 
}

지프

출처

2018-01-10 09:52:04

네이티브 네이티브베이스에 반응하십시오. ListItem onPress 메서드

답변

관련 문제