React Native 列表视图不呈现

Question

我的代码：

const tabscreen = (screen, path, label, src) => {
  return {
    screen, path,
    navigationOptions: {
      tabBarLabel: label,
      tabBarIcon: ({
                     tintColor,
                     focused = true
                   }) => (<TabIcon src={src} active={focused}/>),
    }
  };
};




const MainTab = TabNavigator({
  Home: tabscreen(HomeScreen, '/home', 'home', 'home'),
  Chat: tabscreen(ChatScreen, '/chat', 'chat', 'chat'),
  Find: tabscreen(FindScreen, '/find', 'find', 'find'),
  Profile: tabscreen(ProfileScreen, '/profile', 'find', 'profile')
}, {
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  lazy: false,
  //...other configs
  tabBarOptions: {
    // tint color is passed to text and icons (if enabled) on the tab bar
    activeTintColor: '#1BBC9B',
    inactiveTintColor: '#9B9B9B',
    showIcon: true,
    style: {
      backgroundColor: '#F4F4F4',
      borderTopWidth: 0,
      height: 49
    },
    labelStyle: {
      marginTop: 0,
      marginLeft: 0,
      marginRight: 0,
      marginBottom: 1.5
    }
  }
});


 const AppNavigator = StackNavigator({
  Main: {
    screen: MainTab ,
    path: '/',
    navigationOptions: {
      header: null,
      headerVisible: false,
      gesturesEnabled: false,
    }
  },


}, {
  initialRouteName: 'Main',
  mode: 'card',
  headerMode: 'screen',
  navigationOptions: {
      headerVisible: false,
      gesturesEnabled: true,
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: 'white',
      headerBackTitle: null,
  }
});

这个demo使用redux来控制状态。在 FindScreen 中，我使用 List view 来呈现列表。问题是当我单击 Find 选项卡时。 List view 不呈现。 我要先刷屏，然后List view显示

我使用 redux-react 的 connect 将调度映射到 FindScreen 组件。我在 componentDidMount 生命周期挂钩中请求 List view 的数据源。

componentWillReceiveProps(nextProps) {

    if( nextProps.doctorList !== this.props.doctorList){
      debugger;
      this.setState({
        isRefreshing: false,
        dataSource: this.state.dataSource.cloneWithRows(nextProps.doctorList),
      })
    }
}

如上代码，我在componentWillReceiveProps生命周期钩子中设置了调试器。断点停在调试器所在的行。现在，我知道我很好地从后端请求数据。

你知道List view不渲染的原因吗？我该怎么做才能在第一个渲染中显示 List view？

我知道解决这个问题的一种方法是将 lazy: false, 更改为 lazy: true。由于lazy: false是我领导写的，所以最好不要改。

Answer 1

将 removeClippedSubviews={false} 添加到您的 ListView。

您可以参考https://github.com/react-community/react-navigation/issues/1279进行修复。请注意，这不是一个理想的修复，因为这会禁用性能优化。

您可以在此处阅读有关性能优化的信息https://facebook.github.io/react-native/docs/listview.html#removeclippedsubviews

React Native 列表视图不呈现

React Native List View Does not Render

react-native

redux

react-redux

react-navigation