javascript - 搜索的最后结果被底部的选项卡导航器隐藏

标签 javascript reactjs react-native scrollview tabnavigator

问题是搜索的最后一个结果被 bottomTabNavigaor 隐藏了,我无法滚动它上面的最后一个结果。
我需要看到 bottomTabNaviga 或者不要隐藏它。

    return (
        <View>
          <ScrollView  style={{ backgroundColor: '#DEFEFC'}}>
            {musicList.map(songObj => {
              return (
                <View key={songObj.Song_ID} >
                  <TouchableOpacity style={styles.resultsContainer}
                    onPress={this.GetListViewItem.bind(this, songObj.Song_ID)}
                  >
                    <Text style={{ fontSize: 16, flex:1}} key={songObj.Song_ID}>
                      {songObj.Song_Name}
                    </Text>
                    <Image source={{ uri: songObj.Image }} style={styles.img} />
                  </TouchableOpacity>
                </View>
              );
            })}
          </ScrollView>
        </View>
      );

screenshot of the iOS app

我的 bottomTabNavigator:

const HomeStack = createStackNavigator({
  Home: HomeScreen
});
HomeStack.navigationOptions = {
  tabBarLabel: "Home",
  tabBarIcon: (
    <Image
      style={{ width: 27, height: 27 }}
      source={{uri: bottomImage+ "/home.png"}}
    />
  )
};
const SearchStack = createStackNavigator({
  Search: SearchScreen
});

SearchStack.navigationOptions = {
  tabBarLabel: "Search Music",
  tabBarIcon: (
    <Image
      style={{ width: 27, height: 27 }}   
      
      source={{uri: bottomImage +"/search_1.jpg"}}
    />
  )
};
/////----{ I shorten it you can guess the others} ---
export default createBottomTabNavigator({
  HomeStack,
  ArtistsStack,
  SearchStack,
  PlaylistStack,
  ShowDataStack
});

如果需要任何额外的代码,请告诉我,我会把它放在这里。

最佳答案

这个问题不是由于导航器引起的,我们在 ScrollView 中遇到了同样的问题,最简单的排序方法是在 ScrollView 的底部使用填充。

<ScrollView  style={{ backgroundColor: '#DEFEFC',paddingBottom: 50}}>
</ScrollView>

根据项目的高度更新填充值。

关于javascript - 搜索的最后结果被底部的选项卡导航器隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53543629/

相关文章:

javascript - 带有 Ember CLI 的 jQuery UI

javascript - 在 React/JavaScript 中不知道字体的情况下计算文本的像素宽度

javascript - 将 Selenium-IDE 源代码导出为 JavaScript 代码

javascript - 在 redux 中使用生命周期方法与在 render 方法中检查 prop 状态

javascript - D3 图形事件监听器之外的任何地方

javascript - 如何将 props 传递给 React 组件中的状态

javascript - React-Table 在选择时重新呈现整个表格

react-native - 登录后带有顶部选项卡的抽屉导航

ios - React-Native View Component 按钮按下时的原生 iOS 导航

javascript - 如何在 React Native 中添加多个组件?