Как создать пользовательские вкладки в центре экрана в React Native

Question

Я делаю реагировать нативное приложение.При этом на одном экране есть пользовательские вкладки в центре экрана.

Мой экран похож на

• вид сверху на высоте около 200 пикселей с некоторыми текстовыми строками.
• После этого пользовательские вкладки в виде рисунка прилагаются.
• После этого я показываю для первой вкладки данные списка плоских нажатий.

Я проверил онлайн-форумы и учебные пособия, согласнопанель вкладок, мы можем показать верхний или нижний экран с вкладками.Но, Как показать вкладки с настройкой, как мое требование.

У меня есть 4 вкладки, и каждая вкладка имеет один и тот же вид сверху, который я упоминал выше (несколько строк текста), И если я нажимаю на каждую вкладку, разныедолжна отображаться нижняя страница данных.

Например,

• Первая вкладка с некоторым плоским списком,
• Вторая вкладка с несколькими строками текста,
• аналогичноВсе вкладки имеют разный макет в нижнем экране.

Поскольку я очень новичок, чтобы реагировать на родной.Как этого добиться?Из-за политики конфиденциальности я не могу опубликовать полный скриншот.

Вот мой код.

Screen.js

 onClickTelugu = () => {
    alert("you clicked onClickTelugu")
   }
   onClickTamil = () => {
    alert("you clicked onClickTamil")

   }
   onClickHindi = () => {
    alert("you clicked onClickHindi")

    }
   onClickEnglish = () => {
    alert("you clicked onClickEnglish");
    }


 render(item) {
        return (
            <View style={styles.container}>
              <View style ={styles.Container}> 
              <Text style={styles.textStyle}>
                    Some Text
              </Text>
              <View style={styles.somestyles}>
              <TouchableOpacity onPress={this.onClick}>
                    <Image
                        style={styles.somestyles}
                        source={MenuImage}
                    />
                </TouchableOpacity>
                <TouchableOpacity onPress={this.onClick}>
                    <Image
                        style={styles.menuIcon}
                        source={MenuImage}
                    />
                </TouchableOpacity>
                </View>
              </View>
              <View style ={styles.somestyles}>
              <View style={styles.somestyles}>
              <Text style= {styles.somestyles}> 
                    Some Text
              </Text>
              <Text style= {styles.somestyles}> 
                    Some Text
              </Text>
              <Text style= {styles.somestyles} >
              <Text style= {styles.somestyles}>
                    Some Text
              </Text>
              <Text style ={styles.somestyles}>
                    Some Text
              </Text>
              </Text>
              </View>
              <View style={styles.somestyles}>
              <Text style={styles.somestyles}>some text</Text>
              <Text style={styles.somestyles} >some text</Text>
              <Text style={styles.somestyles}>date</Text>
              <Text style={styles.somestyles}>some other date</Text>
              </View>
              </View>
              </View>
           <View style = {styles.tabContainer}>
           <View style ={styles.tabInnerContainer}>
           <TouchableOpacity style={styles.tabIcons} onPress={this.onClickTelugu}>
                            <Image
                                style={styles.tabItemsImages}
                                source={image}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={this.onClickTelugu}>Telugu</Text>
                    </View>
                    <View style={styles.tabInnerContainer}>
                        <TouchableOpacity style={styles.tabIcons} onPress={this.onClickTamil}>
                            <Image
                                style={styles.tabItemsImages}
                               source={image}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={this.onClickTamil}>Tamil</Text>
                    </View>
                    <View style={styles.tabInnerContainer}>
                        <TouchableOpacity style={styles.tabIcons} onPress={this.onClickHindi}>
                            <Image
                                style={styles.tabItemsImages}
                                source={image}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={this.onClickHindi}>Hindi</Text>

                    </View>
                    <View style={styles.tabInnerContainer}>
                        <TouchableOpacity style={styles.tabIcons} onPress={this.onClicEnglish}>
                            <Image
                                style={styles.tabItemsImages}
                               source={image}
                            />

               </TouchableOpacity>
               <Text style={styles.tabTextItems} onPress={this.onClicEnglish}>English</Text>

                  </View>
              </View>
              <View style = {styles.flatListContainer}>  
                  <FlatList style = {styles.flatList}
                        showsVerticalScrollIndicator = {true}
                        data = {this.state.dataArray}
                        renderItem = {({item}) => (
                            <TouchableWithoutFeedback onPress={ () => this.flatListItemHandler(item)}>
                               <Image
                                style={styles.flatListArrowImage}
                               source={image}
                            />
                               </View>
                                <View style={styles.flatListItemInsideSeparator}>

                        )
                    }
                    ItemSeparatorComponent = {() => (
                        <View style={{height:15, backgroundColor:'#F8F8F8'}}/>
                    )}
                />
              </View>
          </View>
      );
    }
  }

И я должен показать изображения вкладки тоже.Если 1-я вкладка нажата, 2,3,4 изображения вкладок должны быть похожи на восторженные изображения.Как выделенные / восхищенные изображения.

Answer 1

Хорошо, вам нужно дать этому компоненту собственное состояние, чтобы отслеживать, что вы хотите показать в нижней части.тогда вы должны заменить все ваши события onClick только одним событием onClick, которому вы передаете разные языки.Например, this.onClickTelugu становится () => this.onClick('telugu'), тогда ваше событие onClick должно быть:

onClick = (language) => { this.setState({selectedLanguage: language}) }

, тогда в вашей функции renderBottomContent вы можете отображать разные вещи в зависимости от того, что это.state.selectedLanguage is.

что-то вроде ...

    class MyComponent extends Component {
      constructor(props) {
        super(props)
        this.state = { selectedLanguage: null}
      }

      onClick = (language) => { 
        this.setState({selectedLanguage: language}) 
      }

      renderBottomContent = () => {
        const {selectedLanguge} = this.state
        switch(selectedLanguage) {
          case "telugu":
            return <View><Text>Telugu</Text></View>
          case "tamil":
            return <View><Text>Tamil</Text></View>
          case "hindi":
            return <View><Text>Hindi</Text></View>
          case "english":
            return <View><Text>English</Text></View>
          default:
            return <View><Text>No Language Selected...</Text></View>
        }
      }

      render() { 
         ...
        <View style ={styles.tabInnerContainer}>
          <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
            <Image style={styles.tabItemsImages} source={image} />
          <Text style={styles.tabTextItems}>
            Telugu
          </Text>
          </TouchableOpacity>
        </View>
        <View style ={styles.tabInnerContainer}>
          <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
            <Image style={styles.tabItemsImages} source={image} />
          <Text style={styles.tabTextItems}>
            Tamil
          </Text>
          </TouchableOpacity>
        </View>
    ... 
        // after all the other tab buttons, render bottom content depending on the component state
        {this.renderBottomContent()}
     }
  }