2017-07-31 105 views
0

我的代碼:陣營本地列表視圖不會呈現

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

enter image description here

該演示使用Redux的控制狀態。 在FindScreen中,我使用List view來呈現一個列表。問題是當我點擊Find選項卡時。 List view不呈現。 我必須先刷屏,然後List view顯示。

enter image description here

我使用的redux-reactconnect到調度映射到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是由我的領導寫的,所以我最好不要改變它。

回答