如何从平面列表导航到新屏幕

Question

我想在单击我的平面列表中的项目时导航到名为 GridVid 的屏幕。我不知道如何做到这一点，因为

onPress={() => this.props.navigation.navigate('GridVid')}

只能在应用程序中调用.js因为这是定义 StackNavigator 的地方，而不是 ListItem 类(位于名为 ListItem.js 的单独文件中(

应用.js

class SettingsClass extends Component {
    constructor(props) {
      super(props)
      this.state = {
        columns: 3, //Columns for Grid
      };   
    }

  render() {
     const {columns} = this.state
      return (
         <View style={styles.grid}>
            <FlatList
                  numColumns={columns}         
                  data={[
                    {uri:'https://randomuser.me/api/portraits/thumb/women/12.jpg'},
                    {uri:'https://randomuser.me/api/portraits/thumb/women/13.jpg'},
                    {uri:'https://randomuser.me/api/portraits/thumb/women/14.jpg'},
                  ]}
                  renderItem={({item}) => {            
                      return (<ListItem itemWidth={(ITEM_WIDTH-(10*columns))/columns} 
                                        image={item}                                           
                              />                                
                            )
                       }}
                  keyExtractor={
                     (index) => { return index } 
                  } 
            />
         </View>
      );
  }
}
//Settings Class swipes to GridVid
const SettingsStack = createStackNavigator({
  SettingsScreen: {
    screen: SettingsClass
  },
  GridVid: {
    screen: GridVidClass
  },
});

列表项.js

export default class ListItem extends Component {
    state = {
       animatepress: new Animated.Value(1)
    }
    animateIn() {
        Animated.timing(this.state.animatepress, {
            toValue: 0.90,
            duration: 200
        }).start()
    }
    animateOut() {
      Animated.timing(this.state.animatepress, {
          toValue: 1,
          duration: 200
      }).start()
  }   
    render() {
      const {itemWidth} = this.props
      return (
          <TouchableWithoutFeedback
             onPressIn={() => this.animateIn()}
             onPressOut={() => this.animateOut()} 
             onPress={() => this.props.navigation.navigate('GridVid')} //WONT WORK HERE in this file!!!!
             >       
             <Animated.View style={{
                margin:5,
                transform: [{scale: this.state.animatepress}] }}>
                  <Image style={{width:itemWidth, height: 100}} source={this.props.image}></Image>   
             </Animated.View>
          </TouchableWithoutFeedback>
        );
    }
  }

/

/网格视频.js

export default class GridVidClass extends Component {
    render() {
      return (
        <View style={styles.container}> 
             <Text>On GridVid </Text>
        </View> 
        );
    }
  }

有没有办法在平面列表(或 App.js 中的任何位置(中调用onPress={() => this.props.navigation.navigate('GridVid')而不是 ListItem(目前它不起作用(？但是，在ListItem中，至少我正在单击所需的图像，并且对我正在单击的内容有一些引用。

Answer 1

你需要做的是将一个onPress道具传递给你的ListItem，这将使导航发生。

应用.js

class SettingsClass extends Component {
    constructor(props) {
      super(props)
      this.state = {
        columns: 3, //Columns for Grid
      };   
    }

  render() {
     const {columns} = this.state
      return (
         <View style={styles.grid}>
            <FlatList
                  numColumns={columns}         
                  data={[
                    {uri:'https://randomuser.me/api/portraits/thumb/women/12.jpg'},
                    {uri:'https://randomuser.me/api/portraits/thumb/women/13.jpg'},
                    {uri:'https://randomuser.me/api/portraits/thumb/women/14.jpg'},
                  ]}
                  renderItem={({item}) => {            
                      return (<ListItem itemWidth={(ITEM_WIDTH-(10*columns))/columns} 
                                        image={item}        
                                        onPress={() => this.props.navigation.navigate('GridVid') // passing the onPress prop 
                              />                                
                            )
                       }}
                  keyExtractor={
                     (index) => { return index } 
                  } 
            />
         </View>
      );
  }
}
//Settings Class swipes to GridVid
const SettingsStack = createStackNavigator({
  SettingsScreen: {
    screen: SettingsClass
  },
  GridVid: {
    screen: GridVidClass
  },
});

列表项.js

export default class ListItem extends Component {
    state = {
       animatepress: new Animated.Value(1)
    }
    animateIn() {
        Animated.timing(this.state.animatepress, {
            toValue: 0.90,
            duration: 200
        }).start()
    }
    animateOut() {
      Animated.timing(this.state.animatepress, {
          toValue: 1,
          duration: 200
      }).start()
  }   
    render() {
      const {itemWidth} = this.props
      return (
          <TouchableWithoutFeedback
             onPressIn={() => this.animateIn()}
             onPressOut={() => this.animateOut()} 
             onPress={this.props.onPress} // using onPress prop to navigate
             >       
             <Animated.View style={{
                margin:5,
                transform: [{scale: this.state.animatepress}] }}>
                  <Image style={{width:itemWidth, height: 100}} source={this.props.image}></Image>   
             </Animated.View>
          </TouchableWithoutFeedback>
        );
    }
  }

Answer 2

ListItem 不在 StackNavigator 中，所以它不知道导航是什么

你可以像Vencovsky的答案一样，或者从ListItem的父组件传递导航道具。

<ListItem 
   itemWidth={(ITEM_WIDTH-(10*columns))/columns} 
   image={item} 
   navigation={this.props.navigation}                                   
/>