内部视图中的滚动视图无法正常反应

时间:2016-07-01 05:02:31

标签: reactjs react-native react-native-android

这里我正在尝试一个简单的代码但滚动视图如果保留在另一个视图中则不起作用。代码是这样的:

union x { float f; DWORD dw; }
DWORD sign=...,mantisa=...,exponent=...;
x.dw=sign<<31;
x.dw|=exponent<<23;
x.dw|=mantisa;
return x.f;

但如果将滚动视图保留为父视图,则它可以完美地工作。代码如下:

  return(
  <View>
    <Toolbar title={this.props.title}>
    </Toolbar>

    <ScrollView>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

      </ScrollView>

  </View>
 );

现在的问题是我不希望我的工具栏上下滚动,我只想让工具栏下面的内容移动。我怎样才能做到这一点?

接下来的问题:滚动视图必须是父视图才能恢复工作吗?

10 个答案:

答案 0 :(得分:25)

在样式中使用属性flexGrow,flex didnt对我有效。

public class ItemsPage : ContentPage, ItemsViewModel.INavigationHandler
{
    ItemsViewModel viewModel;

    public ItemsPage()
    {
        viewModel = Container.Default.Get<ItemsViewModel>();
        viewModel.NavigationHandler = this;
    }


    public async void NavigateToItemDetail(int itemID)
    {
        await Navigation.PushAsync(new ItemDetailPage(itemID));
    }
}

答案 1 :(得分:23)

你应该像这样在视图中包装工具栏:

<View><Toolbar/></View>

将要在scrollview中滚动的组件包装为:

<ScrollView>your expected components...</ScrollView>

并为根视图提供flex:

<View style={{flex:1}}>

最后,您的代码将按预期运行。

答案 2 :(得分:9)

热门<View>必须包含样式flex:1<ScrollView>也必须

答案 3 :(得分:0)

如果您使用<Form>作为本机库,并且要滚动 然后使用KeyboardAwareScrollView

<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.

</KeyboardAwareScrollView>

这将在Android上运行

答案 4 :(得分:0)

更新2020-02:它将与React.Fragment </><React.Fragment></React.Fragment>return( <> <Toolbar title={this.props.title}> </Toolbar> <ScrollView> <HomeScreenTop /> <HomeScreenBottom navigator={navigator}/> </ScrollView> </> ); 一起使用。所以试试这个。

library(shiny)
library(leaflet)
library(leaflet.extras)
library(tidyverse)
library(sf)

#Create T0New data
lat <- c(49.823, 49.823, 58.478, 57.478, 45.823)
lng <- c(-10.854,-10.854,-10.854,2.021,2.02)
date_start_min <- c(123,125,135,168,149)
T0New <- data.frame(lat,lng)

ui <- fluidPage(

  leafletOutput("map", height = "50vh"),
  textInput("dateStart","Date start (from 123 to 149)",value = ""),
  textInput("dateEnd","Date end (from 123 to 149)",value = ""),
  plotOutput("distribPlot", height = "47vh",
             brush = brushOpts(id = "distribPlot_brush", direction = "x", resetOnNew = FALSE))
)

server <- function(input, output, session) {

  #filtrer les données par attribut du graphique
  filteredGraphData <- reactive({

    currentlyFiltered <- T0New

    if(!is.null(input$distribPlot_brush)){
      thisSel <- input$distribPlot_brush
      currentlyFiltered <- currentlyFiltered %>% 
        filter(date_start_min >= thisSel$xmin, date_start_min <= thisSel$xmax)
    }
      return(currentlyFiltered)
  })


  #Sortie map
  output$map <- renderLeaflet({
    leaflet()%>%
      addProviderTiles(providers$OpenTopoMap)
  })

  observe({
      mapData <- filteredGraphData()
      mapProxy <- leafletProxy("map", session = session, data = mapData)
      mapProxy %>%
        clearGroup('A') %>%  
        addCircleMarkers(
          data = mapData,
          lat = mapData$lat,
          lng = mapData$lng,
          radius = 5,
          color = 'red',
          stroke = F,
          fillOpacity = 1,
          group = 'A'
        )
  })


  #Sortie graph
  output$distribPlot <- renderPlot({

    distribPlot <- ggplot(T0New,aes(date_start_min)) +
      geom_density(col = "#053144", fill = "#43a2ca", alpha = 0.3, adjust = 0.75)

    return(distribPlot)
  })
}

# Create Shiny app ----
shinyApp(ui = ui, server = server)

答案 5 :(得分:0)

使用react片段而不是 View 来包装对我有用的滚动视图

<>
<ScrollView>
 .......... 
</ScrollView>
</>

答案 6 :(得分:0)

对我来说,用TouchableWithoutFeedback包装的滚动视图导致滚动视图有时不起作用。

答案 7 :(得分:0)

这让我发疯了,因为我按照每个人的建议添加了 <view> and <ScrollView>,但没有任何效果。然后我关闭了终端,然后使用以下命令再次重建应用程序:

npx react-native run-android

然后,它开始工作。我希望这可以挽救某人的理智:)

仅供参考,仅按 r(或刷新)也不起作用。我不得不重建它。

答案 8 :(得分:0)

我为 style 设置了 height 属性。那么它对我有用。

我的代码:

 <View style={styles.listWrapper}>
       <ScrollView >
         <XYZ/>
       </ScrollView>
 </View>

样式:

 listWrapper:{
    // flex:1,
    // flexGrow:1,
    width:'80%',
    height:300,
},

答案 9 :(得分:-2)

如果您使用的是position: "absolute",,请将其删除并尝试。 您可以尝试

<SafeAreaView>

<ScrollView>

</ScrollView>

</SafeAreaView>