Как сделать контейнерные классы условно - PullRequest
Новая
       14

Как сделать контейнерные классы условно

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

во-первых, это то, что дано мне от дизайнера http://www.giphy.com/gifs/hSRrqF5ObsbXH27V09

В основном, есть category, который передается с предыдущего экрана. и с некоторыми взаимодействиями пользовательского интерфейса, мне нужно визуализировать этот экран снова и снова. поток выглядит так: вы выбираете category, если он имеет subCategories, разрешите пользователю выбрать один из этих subCategories перед рендерингом компонентов ввода. я могу заставить его работать с предложениями if и else, но я чувствую, что это не лучшая практика вообще. Мне просто нужен совет от опытного разработчика (я новичок, чтобы реагировать нативно). Поэтому, прежде чем писать какой-либо код нативным способом, я просто хочу спросить его здесь, так что, возможно, я смогу узнать больше об этом.

Вот мой экран: 

  <NewAdHoc
                contentText={'Kategori Secimi'}
                onBackPress={this.handleBackPress}
                showContentText={false}
            >
                <View style={styles.container}>
                    {currentCategory !== null
                        ? (
                            <View style={{ ...styles.flatListContainer, paddingLeft: undefined, paddingRight: undefined }}>
                                <View style={{ marginHorizontal: 20 }}>
                                    <ListViewItem
                                        categoryName={currentCategory.categoryName}
                                        iconName={currentCategory.categoryIcon}
                                        showBorder={false}
                                        key={currentCategory.categoryId}
                                        categoryId={currentCategory.categoryId}
                                        inNewAdScreen={false}
                                    />
                                </View>
                                <Seperator
                                    backgroundColor={colors.SEPERATOR_BCK}
                                    text={'Ilan Turu'}
                                    style={{ paddingHorizontal: 20 }}
                                />
                                {
                                    currentCategory.subCategories.map((subc) => (
                                        <View style={{ marginHorizontal: 20 }}>
                                            <SubCategoryItem
                                                text={subc.subCategoryName}
                                                key={subc.subCategoryId}
                                                showBorder={true}
                                            />
                                        </View>
                                    ))

                                }
                            </View>
                        ) : null}
                </View>
            </NewAdHoc>

прямо сейчас, я рендеринг category, <Seperator/> между категорией и подкатегориями, и подкатегориями. я хочу, чтобы, когда пользователь щелкнул по одному из subCategories, я изменил state на isSubCategorySelected = true, selectedSubCategory= subCategoryId, а затем должен отобразить весь экран, как в gif, представленном выше.

1 Ответ

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

Для тех, кто пришел сюда за ответом:

То, что я сделал, в основном разделил и победил парадигму. Сначала я делю свою ситуацию на два основных состояния.

  1. RenderInitialForm(),

  2. renderAfterSubCategorySelected(),

эти две функции рендеринга обрабатывают весь процесс. при нажатии TouchableOpacity, я setState с двумя переменными: isSubCategorySelected = true, selectedSubCategory = subCategory

и в моей основной функции render(): 


    render() {
        const { currentCategory, isSubCategorySelected, selectedSubCategory } = this.state
        return (
            <NewAdHoc
                contentText={'Kategori Secimi'}
                onBackPress={this.handleBackPress}
                showContentText={false}
            >
                <View style={styles.container}>
                    {currentCategory !== null
                        ? isSubCategorySelected
                            ? this.renderAfterSubCategorySelected()
                            : this.renderInitialForm()
                        : null}
                </View>
            </NewAdHoc>
        );
    }

, если у вас естьЛюбое предложение с моим решением, пожалуйста, не стесняйтесь связаться со мной.

...