Question

我为自己的React-Native应用制作了一个自定义的底部导航栏，我想将其粘贴在屏幕底部。

这是它的样子

   <View style={styles.NavBarBottom}>

                    <TouchableOpacity
                    onPress={() => this.activeTab("home")}>
                        <Text> <Icon name="bitcoin" size={30} color={ this.state.activeTab == "home" ? "#fbc02d" : "white"} /></Text>
                    </TouchableOpacity>



                    <TouchableOpacity
                    onPress={() => this.activeTab("News")}>
                        <Text> <Icons name="news" size={30} color={this.state.activeTab == "News" ? "#fbc02d" : "white"} /> </Text>
                    </TouchableOpacity>

</View>

这是样式

const styles = StyleSheet.create({
    NavBarBottom : {
      paddingTop: 8,
      borderTopWidth: 2,
      backgroundColor: "#005cb2",
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-around",
      padding: 5,
    }
  })

现在这可以成功工作并在主屏幕的情况下显示，但是在导入时在另一个屏幕上显示，仅在加载内容时显示，之后再不显示（最后附加相同的GIF）。同样在我刚刚传递道具的页面上，它没有出现

其他页面的代码应为

<View> 
   <Header 
    navigation = {this.props.navigation} 
    enable = "true" />   
     <ScrollView>
    <View style={listOfCurrencies}>

       { CurrencyDisplay.map(data => 
        <TouchableOpacity>
          <View style={IndvidualCurrencyMain}> 
         <Text  style={dataLong}> {data["long"]}</Text>
             <Text  style={dataShort}>{data["short"]}</Text> 
     </View>
  </TouchableOpacity>)}

 </View>
</ScrollView> 
<BottomNavigation />
</View>

具有这样的样式

const styles = StyleSheet.create({ 
listOfCurrencies: {
        display: "flex",
        flexDirection: "column",
        marginBottom: 60
    }, 
    IndvidualCurrencyMain: {
        backgroundColor: "white",
        display: "flex",
        flexDirection: "row",
        height: 80,
        alignItems: "center",
        height: 50,
        borderRadius: 10,
        marginLeft: 3,
        marginRight: 3,
        marginTop: 5,
        marginBottom: 5

    },
    dataLong:{
        marginLeft: 3,
        width: 150
    },
    dataShort: {
        marginLeft: "48%",
        marginRight: 5
    },
    index: {
        marginLeft: 2,
        width: 20
    }
})

知道为什么它不会出现吗？

Answer 1

您可以通过添加主视图flex：1样式来尝试这种操作

自定义组件未出现

1 个答案: