Как я могу скрыть аккордеонный контент в React Native?

Question

В этом примере я хочу показать и скрыть функцию для контента аккордеона. Это мой исходный код.

state = {
    check: true,
};

 renderContent = (order, _, isActive) => {
    //Accordion Content   
    return (
         <View style={styles.child}>
                   <View>
                     <Text>Hello World</Text>
                   </View>

                   <View>
                     <Text>Goodbye</Text>
                   </View>
                }
         </View>
        )
}

render() {
    return (
        <View style={styles.scrollMain}>
                <CheckBox
                    value = { this.state.check}
                    onValueChange={(newValue) => this.setState({check:newValue})}/> // this is my checkbox
                <Accordion
                    .....
                    renderContent={this.renderContent}
                    }/> 
            }
        </View>
    );

Что я хочу сделать, если я нажму на флажок, он должен скрыть это содержимое ниже

                `<View>
                  <Text>Goodbye</Text>
                </View>`

Когда я сниму флажок, он должен вернуться назад. Дайте, пожалуйста, идею, как я могу это сделать?

Answer 1

Попробуйте это условие, если вы хотите другое поведение, просто скажите мне

     renderContent = (order, _, isActive) => {
    //Accordion Content   
    return (
         <View style={styles.child}>
                   <View>
                     <Text>Hello World</Text>
                   </View>

                {!this.state.check &&
                   <View>
                     <Text>Goodbye</Text>
                   </View>}
                }
         </View>
        )
}

Answer 2

Привет, у вас почти все получилось, вы просто должны думать, что условие this.state.check - это то, которое будет обрабатывать контент, поэтому у вас есть несколько вариантов для этого:

• Вы можете создать другоекомпонент для обработки этой логики.
• Вместо этого используйте блок JSX для обработки этой логики.
• Или вы можете использовать css с классом или чем-то ещепохоже просто скрыть содержимое, но элементы всегда будут существовать.

Я думаю, что это решение затрагивает ваш вариант использования, но простой способ сделать это - заключить логику в JSX блок

renderContent = (order, _, isActive) => {
    //Accordion Content   
    return (
         <View style={styles.child}>
                   <View>
                     <Text>Hello World</Text>
                   </View>

                   {
                    !this.state.check?
                     <View>
                      <Text>Goodbye</Text>
                     </View> 
                    : null
                   }
                }
         </View>
        )
}