Как визуализировать два элемента рядом ReactNative - PullRequest
Новая
       47

Как визуализировать два элемента рядом ReactNative

0 голосов
/ 25 октября 2019

Допустим, у меня есть <ListingCard/> компоненты внутри <ScrollView/>. То, что я хочу, это отрендерить эти <ListingCard/> бок о бок в классе контейнера.

Вот что я пробовал до сих пор:

<ListingCard/>

const ListingCard = (props) => {
    return (
        <View style={styles.container}>
          <Text>This is ListingCard Component</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
      //flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      height: 150,
      width: Dimensions.get('window').width / 2 - 6,
      backgroundColor: colors.WHITE,
      borderRadius: 5,
      marginHorizontal:10,
      marginBottom: 10
    },
  });


export default ListingCard;

вот как я использовал <ListingCard/>: 

  render() {
        const { currentCategory } = this.state;
        return (
            <Drawer
                ref={(ref) => this._drawer = ref}
                type="static"
                onOpenStart={() => {
                    this.setState({
                        isDrawerOpen: true,
                    })
                }}
                onClose={() => {
                    this.setState({
                        isDrawerOpen: false,
                    })
                }}
                content={<SideFilterMenu />}
                tapToClose={true}
                side={'right'}
                openDrawerOffset={0.2} // 20% gap on the right side of drawer
                panCloseMask={0.2}
                closedDrawerOffset={-3}
            >
                <View style={styles.container}>
                    <CustomHeader
                        onPress={() => this.handleFilterPress()}
                        headerText={currentCategory && currentCategory.categoryName}
                        isIconVisible={true}
                        rightButtonText={'Filtrele'}
                        onIconPress={() => this.handleBackPress()}
                    />
                    <ScrollView 
                    style={{flex:1}}
                    contentContainerStyle={styles.cardContainer}
                    >
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                        </ScrollView>
                </View>
            </Drawer>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        //alignItems: 'center',
        //justifyContent: 'center',
        backgroundColor: colors.GENERAL_BCK,
        //paddingHorizontal: 5

    },
    cardContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
});

Я пробовал с контейнером <View> или без него, но это не помогло вообще. Причина, по которой я не смог ее принять, заключается в том, что я относительно новичок в ReactNative и испытываю трудности с этими стилями. Я не мог сделать, чтобы сделать эти <ListingCard/> рядом. Любая помощь будет оценена, спасибо.

1 Ответ

0 голосов
/ 25 октября 2019

Хорошо, я исправил это.

Проблема была в ширине <ListingCard/>.

это было: width: Dimensions.get('window').width / 2 - 6,, что было слишком широким для размещения двух из них в одном ряду. поэтому я изменил его на: width: Dimensions.get('window').width / 2 - 20, и вуаля! это сработало.

...