时间戳

首页 > 解决方案 > 如何将所选数据从 Flatlist 传递到另一个屏幕

react-native - 如何将所选数据从 Flatlist 传递到另一个屏幕

问题描述

我在使用 React Native 和移动应用程序开发方面还是新手。我试图从另一个教程中复制代码并且对它有一点理解。

我有 Save.js、Feed.js 和 Details.js。我已使用 FlatList 和 RenderItem 成功地将数据从 Save.js 检索到 Feed.js。现在，我只想将选定的数据从 Feed.js 传递到 Details.js。但我很困惑使用哪种方式，无论是 useNavigation、getParam、withNavigation 还是其他什么？使用 Hooks 和 Class 有什么区别吗？顺便说一句，我正在使用 Hooks。

保存.js

import { View, TextInput, Image, Button, StyleSheet, TouchableOpacity, Text} from 'react-native'
import { NavigationContainer } from '@react-navigation/native'

export default function Save(props, navigation) {
    const [productName, setProductName] = useState("")
    const [category, setCategory] = useState("")

return (
    <View style={styles.inputView}>
        <TextInput
            placeholder="Product name..."
            onChangeText={(productName) => setProductName(productName)} 
        />
    </View>

    <View style={styles.inputView}>
        <TextInput
            placeholder="Category..."
            onChangeText={(category) => setCategory(category)} 
        />
    </View>

Feed.js

function Feed(props, navigation) {
    const { currentUser, posts } = props;  
    const { navigate } = useNavigation();

return (
     <FlatList
          data={posts}
          keyExtractor={(item, index) => item.key}
          contentContainerStyle={{
             padding: 20,
             paddingTop: StatusBar.currentHeight || 42,
          }}

          renderItem={({item, index}) => (
                <TouchableOpacity 
                    onPress={() => props.navigation.navigate("Details", {productName: item.productName})}

          <View>
                <Text>{item.productName}</Text>
                <Text>Category : {item.category}</Text>
          </View>
       />
)}

const mapStateToProps = (store) => ({
    currentUser: store.userState.currentUser,
    posts: store.userState.posts
})

export default connect(mapStateToProps, null)(Feed);

详细信息.js

export default function Details({ props, navigate, route }) {
  const productName  =  props.navigation.route.params.productName;
  const { navigate } = useNavigation();
  const productName = useNavigationParam('productName');

  return (
    <View>
      <Text>{productName}</Text>
      <Text>{Category}</Text>
    </View>
  )
}

我不确定在Details.js中使用哪种方式，所以我只是把我用过和测试过的所有代码都放了。

标签： react-nativereact-hooks

解决方案

下面的代码将对您有所帮助，我认为您在破坏上下文时遇到问题，这将对您有所帮助。记住导航是道具里面的一个对象

Feed.js

function Feed(props) {
    const { currentUser, posts, navigation } = props;

return (
     <FlatList
          data={posts}
          keyExtractor={(item, index) => item.key}
          contentContainerStyle={{
             padding: 20,
             paddingTop: StatusBar.currentHeight || 42,
          }}

          renderItem={({item, index}) => (
                <TouchableOpacity 
                    onPress={() => props.navigation.navigate("Details", {productName: item.productName})}

          <View>
                <Text>{item.productName}</Text>
                <Text>Category : {item.category}</Text>
          </View>
       />
)}

const mapStateToProps = (store) => ({
    currentUser: store.userState.currentUser,
    posts: store.userState.posts
})

export default connect(mapStateToProps, null)(Feed);

在 Feed 中你不需要使用 useNavigation() 因为 props 参数包含导航。

详细信息.js

export default function Details(props) {
  const {productName, category}  =  props.navigation.route.params;

  return (
    <TouchableOpacity onPress={()=>props.navigation.navigate("Save",{productName, category})}>
      <Text>{productName}</Text>
      <Text>{Category}</Text>
    </TouchableOpacity>
  )
}

推荐阅读