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,
  }
});

此演示使用redux来控制状态。在FindScreen中，我使用List view呈现列表。问题是当我点击Find标签时。 List view无法呈现。 我必须首先滑动屏幕，然后是List view节目。

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

componentDidMount

如上面的代码，我在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是由我的领导写的，所以我最好不要改变它。

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 List View无法渲染

1 个答案: