React-Native 中如何让TextInput获得焦点？

问题：项目需求是这样的点击另外一个icon使得input获得焦点，并自动调起键盘。

解决思路一：
原本项目集成了ant-mobile，想直接使用ant的InputItem，但是很不幸，在react-native中并不支持focus方法。

解决思路二：
采用原生的TextInput，这里直接上代码

import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, TextInput } from 'react-native'

export default class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
             value:''
        }
    }
        render(){
            return(
                <View>
                    <Text style={styles.secondText}>姓名</Text>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        <TextInput
                             ref={input => this.input = input}
                             value={this.state.value}
                             autoFocus={true}
                             underlineColorAndroid="transparent"
                         /> :
                         <TouchableOpacity onPress={this.edit}>
                                <Text>点击input将获得焦点</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }
}

autoFocus属性为true时input能够自动获得焦点，但是如何实现点击之后获得焦点呢，并且点击之后input可以编辑，点击之前input不能编辑？

尝试将代码改成如下：

默认input是不可编辑的，点击文本之后，input可以编辑，并且可以获得焦点和弹出键盘，再次点击文本之后变回不可编辑状态。

    import React from 'react'
    import PropTypes from 'prop-types'
    import { View, Text, TextInput,TouchableOpacity } from 'react-native'

    export default class Example extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                 value:'',
                 editable:false
            }
        }
            render(){
                return(
                    <View>
                        <Text style={styles.secondText}>姓名</Text>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <TextInput
                                 ref={input => this.input = input}
                                 value={this.state.value}
                                 editable={this.state.editable}
                                 autoFocus={this.state.editable}
                                 underlineColorAndroid="transparent"
                                 onChangeText={(e)=>this.setState({value:e.nativeEvent.text})}
                             /> :
                             <TouchableOpacity onPress={()=>{this.setState({editable:!this.state.editable})}}>
                                    <Text>点击input将获得焦点</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                )
            }
    }

想法是好的，但是在实际操作过程中，发现input始终无法获得焦点，这个可能与autoFocus状态有关，最终得到的解决方案是根据editable状态进行判断，然后返回一个Text和TextInput模拟两种不同的状态，代码如下：

    import React from 'react'
    import PropTypes from 'prop-types'
    import { View, Text, TextInput,TouchableOpacity } from 'react-native'

    export default class Example extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                 value:'',
                 editable:false
            }
        }
            render(){
                const { editable } = this.state;
                return(
                    <View>
                        <Text style={styles.secondText}>姓名</Text>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            {editable?
                                <TextInput
                                     ref={input => this.input = input}
                                     value={this.state.value}
                                     autoFocus={true}
                                     underlineColorAndroid="transparent"
                                     onChangeText={(e)=>this.setState({value:e.nativeEvent.text})}
                                 /> :
                                 <Text>{this.state.value}</Text>
                             }
                             <TouchableOpacity onPress={()=>{this.setState({editable:!this.state.editable})}}>
                                    <Text>点击input将获得焦点</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                )
            }
    }

目前采用的解决方案是这样的，如果有更好的解决方案，欢迎留言。