return (                                  

        <View style={styles.container}> 

                <Avatar imgSrc={this.props.image} /> 

                <View style={styles.form}> 

                    <FormItem 

                      title={"Username"} 

                      value={this.state.username} 

                      onChange={this._usernameChanged.bind(this)}/> 

                </View> 

                <Button 

                    title={"Submit"} 

                    onPress={this._submit.bind(this)}/> 

            </View> 

        ); 

    } 

} 

如今的代码看起来更多了 – 由于我们为Avatar，FormItem和Button组件添加了包装器，但如今我们可以在需求的中央重复运用这些组件。我们可以将这些组件移动到独自的模块中，并导入我们需求的任何中央。我们也可以添加其他一些Props，例如style，TextStyle，onLongPress，onBlur，onFocus。而且这些组件是完全可以定制的。

留意，一定不要深度定制一个小组件， 这样会使组件过于繁琐，代码会变的很难阅读。即使如今添加新属性的想法看起来像是处置义务的最复杂的办法，未来这个小小的属性在阅读代码时能够会惹起困惑。

关于理想的smart/dumb组件，看一下这个：

class Button extends Component{ 

    constructor(props){ 

        super(props); 

    } 

    _setTitle(){         

        const { id } = this.props;         

        switch(id){             

            case 0:                 

                return 'Submit';             

            case 1:                 

                return 'Draft';             

(责任编辑：admin)