代码之家 › 专栏 › 技术社区 › Anilkumar iOS Developer

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

tabbar tabs react-native

Anilkumar iOS Developer · 技术社区 · 6 年前

我正在执行react本机应用程序。在这种情况下,一个屏幕在屏幕中央有自定义选项卡。

我的屏幕就像,

顶部视图大约200px高,显示一些文本行。
之后,自定义标签作为图片附加。
在那之后,我将显示第一个选项卡上的点击平面列表数据。

我已经检查了在线论坛和教程,根据标签栏,我们可以显示顶部或底部屏幕与标签。但是,如何显示像我要求的定制选项卡。

我有4个选项卡,每个选项卡都有我在上面提到的相同的俯视图(一些文本行),如果我点击每个选项卡,就会显示不同的数据底页。

像,

第一个标签有一些简单的列表,
第二个标签带有一些文本行,
同样,所有选项卡在底部屏幕中的布局都不同。

因为我对本土人的反应很陌生。如何做到这一点? 由于隐私政策,我无法发布完整的屏幕截图。

这是我的密码。

屏幕,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 标签图片应该像高兴的图片一样。喜欢突出显示/高兴的图像。

2 回复 | 直到 6 年前

Nunchucks 6 年前

好的,你需要给这个组件一个它自己的状态来跟踪你想在下面显示什么。然后,您应该用一个传递不同语言的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()}
     }
  }

-2

Jaydeep Galani 6 年前

你可以把你的屏幕分成两部分,用两部分 <View> ,然后在第二秒使用选项卡栏 <查看& GT; .

<View style={{flex:1}}>
    <View style={{height:200}}>.... </View>
    <View>
      //here use tabbar component from libabry (like: react-native-tab-navigator or anything else) as top
     </View>
</View>