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>
      );
    }
  }

我也必须显示叠加标签图像。如果点击第一个标签，则2,3,4 标签图像应该像令人高兴的图像。喜欢突出显示/高兴的图像。

Answer 1

好的，您需要为该组件提供自己的状态，以跟踪您想要在下部显示的内容。那么您应该只将一个传递不同语言的onClick事件替换为所有onClick事件。例如，this.onClickTelugu变为() => this.onClick('telugu')，则您的onClick事件应为：

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

然后在您的renderBottomContent函数中，可以根据this.state.selectedLanguage是什么呈现不同的内容。

类似...

    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()}
     }
  }

如何在React Native中在屏幕中央创建自定义选项卡

1 个答案: