Question

当我单击FlatList中的项目时，我想导航到一个名为GridVid的屏幕。我不知道该如何做

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

只能在App.js中以定义StackNavigator的方式工作，而不是ListItem类（位于单独的名为ListItem.js的文件中）

// App.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
  },
});

// ListItem.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>

        );
    }

  }

// GridVid.js

export default class GridVidClass extends Component {

    render() {
      return (
        <View style={styles.container}> 
             <Text>On GridVid </Text>

        </View> 
        );
    }

  }

在FlatList（或App.js中的任何地方）中，有没有什么方法可以调用onPress={() => this.props.navigation.navigate('GridVid')而不是ListItem（目前无法正常工作）？但是，在ListItem中，至少我单击了想要的图像，并且对我单击的图像有一些参考。

Answer 1

您需要做的是向您的onPress传递一个ListItem道具，以进行导航。

// App.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
  },
});

// ListItem.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}                                   
/>

如何从FlatList导航到新屏幕？

2 个答案: