React Native -如何在FlatList属性上使用导航？

c7rzv4ha 于 2023-04-07 发布在 React

关注(0)|答案(1)|浏览(139)

我想知道如何在FlatList属性上使用React Navigation，其中Stack.Screen的名称来自.json文件。
这样，当用户单击该项目时，他们将转到应用程序的另一个页面。

数据

{
  Data: [
    {
      "key": "0",
      "label": "Test",
      "goTo": "Test", <--- Here goes the name of Stack.Screen from routes.js
    }
  ]
}

FlatList结构

function Item({ label, goTo }) {
  return (
    <Ripple rippleCentered onPressIn={goTo}> // (react-native-material-ripple)
      <Option>
        <Icon name={onIcon} size={28} color={onColor} /> // (react-native-vector-icons)
        <OptionLabel color={onColor}>{label}</OptionLabel>
      </Option>
    </Ripple>
  );
}

我已经尝试在涟漪的onPressIn属性上使用navigation.navigate({goTo})，但出现了ReferenceError：* 找不到变量：导航 *

最终导出组件

export default class Menu extends Component {
  render() {
    return (
      <Container color={this.props.color}>
        <FlatList
          data={Data}
          showsVerticalScrollIndicator={false}
          keyExtractor={item => item.key}
          numColumns={5}
          columnWrapperStyle={Styles.Row}
          renderItem={({ item }) =>
            <Item
              goTo={item.goTo}
              label={item.label}
            />
          }
        />
      </Container>
    );
  }
}

react-native

来源：https://stackoverflow.com/questions/60436166/react-native-how-to-use-navigation-on-flatlist-property

1条答案

按热度按时间

xxhby3vn1#

读取json文件

import json from './myfile.json'; // reading from json file

export default class Menu extends Component {
  render() {
    return (
      <Container color={this.props.color}>
        <FlatList
          data={json.Data} // accessing Data from json
          showsVerticalScrollIndicator={false}
          keyExtractor={item => item.key}
          numColumns={5}
          columnWrapperStyle={Styles.Row}
          renderItem={({ item }) =>
            <Item
              goTo={item.goTo}
              label={item.label}
            />
          }
        />
      </Container>
    );
  }
}

import { useNavigation } from '@react-navigation/native';

function Item({ label, goTo }) {
  const navigation = useNavigation(); // navigation hook

  return (
    <Ripple rippleCentered onPressIn={() => navigation.navigate(goTo)}> // navigate to goTo screen
      <Option>
        <Icon name={onIcon} size={28} color={onColor} />
        <OptionLabel color={onColor}>{label}</OptionLabel>
      </Option>
    </Ripple>
  );
}

请注意，Menu需要在NavigationContainer之下，这样useNavigation才能工作。

赞(0）回复(0）举报 2023-04-07

我来回答

React Native -如何在FlatList属性上使用导航？

1条答案

读取json文件

导航

相关问题

热门标签

最新问答