ネイティブネイティブベースに反応します。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' 
    } 
}

のGIF

出典

2018-01-10 09:52:04

ネイティブネイティブベースに反応します。ListItem onPressメソッド

答えて

関連する問題