Question

我正在尝试在本机反应中将功能从父容器传递到子容器。在屏幕上，向用户显示项目列表，用户可以在其中滑动列表以显示更多选项

孩子

    import React from 'react';
    import { StyleSheet, Text, View, Image} from 'react-native';
    import { Container, Content, Button, Icon, List, ListItem,Body,Left,Thumbnail } from 'native-base';
    import Swipeout from 'react-native-swipeout';

    const swipeBtns = [
      {
        component: (
          <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'column',
              }}
          >
            <Image source={require('../../../assets/imgs/trash.png')} />
          </View>
        ),
        backgroundColor: '#f15151',
        onPress: () => {
          onDeleteGroup()

        }

    },
    {
      component: (
        <View
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'column',
            }}
        >
          <Image source={require('../../../assets/imgs/edit.png')} />
        </View>
      ),
      backgroundColor: '#1b6faa',
      onPress: () => {
        console.log("Edit Item");
      }
    }
    ];

    const CreatedGroupsScreen = ({navigation, myGroups, onDeleteGroup}) => (

       <Container>
           <Content contentContainerStyle={{justifyContent:'center'}}>
           <Button 
           onPress={()=>navigation.navigate('CreateGroup')}
           style={{width:'90%', alignSelf:'center', margin:10}} block bordered iconRight>
               <Icon name="add"/>
               <Text style={{fontSize:15}}>
                Create New Group
               </Text>
           </Button>
                <List
                dataArray={myGroups}
                renderRow = {(item)=>{
                return (
                  <Swipeout right={swipeBtns} autoClose="true" backgroundColor= 'transparent'>

                <ListItem 
                onPress={()=>navigation.navigate('GroupPosts')}
                avatar>
                  <Left>
                  <Thumbnail source={require(`../../../assets/imgs/group.png`)} />
                  </Left>

                  <Body>
                    <Text style={{fontWeight:'700', fontSize:16, color:'#1b6faa'}}>{item.groupName}</Text>
                    <Text style={{fontSize:15, color:'#5f5f5f'}} >{item.about}</Text>
                  </Body>

                </ListItem>
                </Swipeout>
                )}
                }>
              </List>
           </Content>
       </Container>

    );
export default CreatedGroupsScreen;

父母

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Alert} from 'react-native';
import CreatedGroupsScreen from './CreatedGroupsScreen';

class CreatedGroupsContainer extends Component{

  state = {
    myCreatedGroups: [
      { groupName: 'group1', about: 'bla bla bla' },
      { groupName: 'group2',   about: 'bla bla abla' },
      { groupName: 'group3', about: 'bla bla bla' },
    ],

  }

handleDeleteGroup = () => {
  Alert.alert(
    'Delete Group',
    'Are you sure to delete group?',
    [
      {text: 'No', onPress: () => console.log('Ask me later pressed')},
      {text: 'Yes, Delete', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
    ],
    { cancelable: false }
  )
}
  render() {
    return (
     <CreatedGroupsScreen
     navigation = {this.props.navigation}
     myGroups = {this.state.myCreatedGroups}
     onDeleteGroup = {this.handleDeleteGroup}
     />
    );
  }
}
export default CreatedGroupsContainer;

当我在列表上滑动并点击删除图标时，屏幕上会弹出一条错误消息，提示“无法找到变量onDeleteGroup”。对如何使其正常工作有帮助吗？

Answer 1

找不到

onDeleteGroup，因为它不在子组件中正确的范围内。因此，将const swipeBtns组件的配置（<Swipeout />）移到< CreatedGroupsScreen />组件本身内部，例如：

const CreatedGroupsScreen = ({navigation, myGroups, onDeleteGroup}) => {
   const swipeBtns = [
     CONFIG_GOES_HERE
   ];

   return (
    <Container>
       <Content contentContainerStyle={{justifyContent:'center'}}>
       <Button 
       onPress={()=>navigation.navigate('CreateGroup')}
       style={{width:'90%', alignSelf:'center', margin:10}} block bordered iconRight>
           <Icon name="add"/>
           <Text style={{fontSize:15}}>
            Create New Group
           </Text>
       </Button>
            <List
            dataArray={myGroups}
            renderRow = {(item)=>{
            return (
              <Swipeout right={swipeBtns} autoClose="true" backgroundColor= 'transparent'>

            <ListItem 
            onPress={()=>navigation.navigate('GroupPosts')}
            avatar>
              <Left>
              <Thumbnail source={require(`../../../assets/imgs/group.png`)} />
              </Left>

              <Body>
                <Text style={{fontWeight:'700', fontSize:16, color:'#1b6faa'}}>{item.groupName}</Text>
                <Text style={{fontSize:15, color:'#5f5f5f'}} >{item.about}</Text>
              </Body>

            </ListItem>
            </Swipeout>
            )}
            }>
          </List>
       </Content>
   </Container>
 );

};

使用react-native中的swipeout将函数从父容器传递到子容器

1 个答案: