Question

我想通过onPress在Flatlist中将特定列表项的Firebase数据传递到另一个屏幕。在目标屏幕中，我想显示在字段中选择的项目的Firebase数据，并使用按钮或开关将项目标记为“完成”＆＃39;并将该响应保存到Firebase。我认为最好在第一个＆＃39; List＆＃39;中使用ComponentDidMount。屏幕呈现以获取所有数据并在另一个屏幕上重复使用。

问题是：（1）如何在详细信息屏幕上的List.js中显示Firebase中的Flatlist数据？

（2）我是否应该使用List.js中的ComponentDidMount来获取我将传递给Detail屏幕的所有信息（并非所有信息都显示在列表中）？如果我不应该，我如何在详细信息屏幕中获取额外信息，因为我在该屏幕以及List.js屏幕中出现ComponentDidMount错误。

（3）如何删除＆＃39;页面中的详细信息。 Tab Navigator只能通过在Flatlist中选择一行来访问它？但是怎么样？当我删除它时，Flatlist项目不会通过onPress进入另一个屏幕。

List.js - 我从Firebase输入数据并将其显示在Flatlist中。

＆＃13;

componentDidMount() {
  const { currentUser } = firebase.auth();
  const keyParent =       firebase.database().ref(`/users/${currentUser.uid}/Profile`);

    keyParent.on(('child_added'), snapshot => {
      const newChild = {
           key: snapshot.key,
           color: snapshot.val().color,
           enddate: snapshot.val().enddate
           other: snapshot.val().other //to display on destination screen only
           other2: snapshot.val().other2 //to display on destination screen only
      };
       
        this.setState((prevState) => ({ list: [...prevState.list, newChild] }));

  });
}

＆＃13;

List.js - 这是Flatlist的render.item部分，我尝试使用Firebase中的数据导航到Detail屏幕。 params部分不起作用，因为我不确定如何从Firebase引用数据。

＆＃13;

onRenderItem = ({ item }) => (
  <TouchableOpacity onPress={this.onSeeDetail}>
    <Text style={styles.listStyle}>
        { item.color }{'\n'}
        { item.enddate }
    </Text>
  </TouchableOpacity>
);

onSeeDetail = () => {
const navigateAction = NavigationActions.navigate({
  routeName: 'Details',
  params: { key: this.key, colour: 'texttest', enddate: this.enddate, other: this.other, other2: this.other2 },
});
this.props.navigation.dispatch(navigateAction);
}

＆＃13;

以下是App.js中的导航部分

＆＃13;

renderContent() {
    switch (this.state.loggedIn) {
      case true:
        return <Pages />;
      case false:
        return <AuthTabs />;
      default:
        return <Spinner size="large" />;
    }
  }

＆＃13;

Navigate.js

＆＃13;

import { TabNavigator, StackNavigator } from 'react-navigation';
import { Register, Login, Add, List, Logout, Details } from './screens';

export const ListStack = StackNavigator({

  List: {
    screen: List,
    navigationOptions: {
      title: 'List',
      },
  },
  Details: {
    screen: Details,
    navigationOptions: {
      title: 'Details',
      },
    },
  },
  {
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: 'white',
      activeBackgroundColor: 'blue',
      inactiveTintColor: 'blue',
      inactiveBackgroundColor: 'white',
      labelStyle: {
        fontSize: 20,
        padding: 10
      },
    }
});

export const Pages = TabNavigator({
  List: {
    screen: List,
    navigationOptions: {
      title: 'List',
    },
  },
  Add: {
    screen: Add,
    navigationOptions: {
      title: 'Add',
    },
  },
    Details: {
    screen: Details,
    navigationOptions: {
      title: 'Details',
    },
  },
  Logout: {
    screen: Logout,
    navigationOptions: {
      title: 'Log Out',
    },
  },
},
  {
    animationEnabled: true,
    tabBarOptions: {
            activeTintColor: 'white',
            activeBackgroundColor: 'blue',
            inactiveTintColor: 'blue',
            inactiveBackgroundColor: 'white',
            labelStyle: {
              fontSize: 20,
              padding: 10
            },
    }
});

export const AuthTabs = TabNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      tabBarLabel: 'Log In',
    },
  },
  Register: {
    screen: Register,
    navigationOptions: {
      tabBarLabel: 'Sign Up',
    },
  },
},
  {
    animationEnabled: true,
    tabBarOptions: {
            activeTintColor: 'white',
            activeBackgroundColor: 'blue',
            inactiveTintColor: 'blue',
            inactiveBackgroundColor: 'white',
            labelStyle: {
              fontSize: 20,
              padding: 10
            },
    }
});

＆＃13;

使用React Navigation标签将Firebase数据传递到另一个屏幕

0 个答案: