react-native shadow 阴影问题

本人最近在学习 RN,问题如下：我创建了一个组件，用于显示一些东西，代码如下 app.js 内容如下

import SideMenu from 'react-native-side-menu'; import CameraList from '../pages/CamList';

export default class App extends Component{

render() {
    return (
        <SideMenu> 
            <CameraList />
        </SideMenu>
    );
}

}

CamList.js 内容如下

export default class CameraList extends Component {

render() {
    return (
        <ScrollView
            style={{ padding:8 }}
            automaticallyAdjustContentInsets={false}
            refreshControl={
                <RefreshControl
                    refreshing={false}
                    onRefresh={this.onRefresh}
                    title="Loading..."
                    colors={['#ffaa66cc', '#ff00ddff', '#ffffbb33', '#ffff4444']}
                />
            }
            >
            <View style={styles.bordershadow}>
                <View style={{height:200, backgroundColor:'red', justifyContent:'flex-end'}}> 
                	<Text style={{color:'#fff', fontSize:12}}>aabbcc</Text>
                </View> 
            </View> 
        </ScrollView>
    );
}

}

const styles = StyleSheet.create({ bordershadow:{ shadowOffset:{ width:2, height:2 }, shadowColor:'black', shadowOpacity:0.2, shadowRadius:1, } });

为了凸显问题，我简化了一些不必要的引用问题来了，我发现 app.js 中，如果我加上 SideMenu 标签，会导致 CamList.js 文件中的所有的元素在显示的时候都有 shadow 的效果而实际上我只想让最外层的 View 添加 bordershadow css 有 shadow 的阴影效果，而实际上不加 SideMenu 标签，代码运行也没什么问题，我研究了很长时间，没搞明白是什么问题请各位赐教，哪怕只是一个思路，谢谢！