发帖选择照片UI优化 review by 盖剑秋

@@ -46,12 +46,17 @@ export default class AssertsPicker extends Component {
         }
 
         let plusStyle = styles.itemContainer;
+        let itemStyle = null;
         if (assets.length == 0) {
             plusStyle = {
                 flex: 1,
+                height: 175,
                 alignItems: 'center',
                 justifyContent: 'center',
             };
+            itemStyle = {
+                top: -10,
+            };
         }
 
         return (
@@ -61,7 +66,7 @@ export default class AssertsPicker extends Component {
                     YH_CommunityAssetsPicker.presentImagePicker(assets);
                 }}
             >
-                <Image style={styles.item} source={require('../../images/posting/add.png')}/>
+                <Image style={[styles.item, itemStyle]} source={require('../../images/posting/add.png')}/>
             </TouchableOpacity>
         );
     }
@@ -73,21 +78,32 @@ export default class AssertsPicker extends Component {
 
         return (
             <ScrollView
+                ref={ref => this.scrollView = ref}
                 style={styles.scroll}
-                contentContainerStyle={styles.scrollContainer}
+
                 horizontal={true}
+                onContentSizeChange={(width, height) => {
+                    let screenWidth = Dimensions.get('window').width;
+                    let offset;
+                    if (width > screenWidth) {
+                        this.scrollView.scrollTo({x: width - screenWidth});
+                    }
+                }}
             >
-                {assets.map((asset, index) => {
-                    return (
-                        <View style={styles.itemContainer} key={index}>
-                            <Image style={styles.item} source={asset}/>
-                            <TouchableOpacity onPress={() => {this.deleteAsset(index);}}>
-                                <Image style={styles.itemDelete} source={require('../../images/posting/delete.png')}/>
-                            </TouchableOpacity>
-                        </View>
-                    );
-                })}
-                {this.renderPlus(assets)}
+            <View style={styles.scrollContainer}>
+            {assets.map((asset, index) => {
+                return (
+                    <View style={styles.itemContainer} key={index}>
+                        <Image style={styles.item} source={asset}/>
+                        <TouchableOpacity onPress={() => {this.deleteAsset(index);}}>
+                            <Image style={styles.itemDelete} source={require('../../images/posting/delete.png')}/>
+                        </TouchableOpacity>
+                    </View>
+                );
+            })}
+            {this.renderPlus(assets)}
+            </View>
+
             </ScrollView>
         );
     }
@@ -112,13 +128,16 @@ export default class AssertsPicker extends Component {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
+        height: 200,
     },
     scroll: {
-        height: 200,
+        height: 175,
     },
     scrollContainer: {
         flexDirection: 'row',
+        justifyContent: 'center',
         alignItems: 'center',
+        height: 175,
         paddingLeft: 24,
         paddingRight: 12,
     },

@@ -214,6 +214,8 @@ export default class Posting extends Component {
                             {this.props.selectedBoard}
                         </Text>
                     </View>
+                    <View style={styles.toolTopLine}/>
+                    <View style={styles.toolBottomLine}/>
                 </View>
                 <AssertsPicker
                     style={[styles.boardSelectionContainer,{height:this.state.imageState,}]}
@@ -255,6 +257,7 @@ const styles = StyleSheet.create({
     container: {
         top: 0,
         flex: 1,
+        backgroundColor: 'white',
     },
     titleInput: {
         left: 0,
@@ -316,12 +319,25 @@ const styles = StyleSheet.create({
         right:0,
         left:0,
         height: 41,
-        borderColor: '#a0a0a0',
-        borderBottomWidth:0.5,
-        borderTopWidth:0.5,
         alignItems:'center',
         justifyContent: 'center',
     },
+    toolTopLine: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: width,
+        height: 0.5,
+        backgroundColor: '#e0e0e0',
+    },
+    toolBottomLine: {
+        position: 'absolute',
+        left: 0,
+        bottom: 0,
+        width: width,
+        height: 0.5,
+        backgroundColor: '#e0e0e0',
+    },
     imgIcon: {
         left:15,
         width:19,

@@ -144,7 +144,8 @@ let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
 let styles = StyleSheet.create({
     container: {
         top: navbarHeight,
-        height: height - navbarHeight - 49,
+        marginBottom: navbarHeight,
+        flex: 1,
     },
 
 });