React Native 无法专注于 TextInput

Question

class Main extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: '',
            password: '',
        }
        console.log('yes')
        this._handleTextChange = this._handleTextChange.bind(this)
    }

    _handleTextChange(id, text) {
        console.log(text)
        var newState = Object.assign({}, this.state);
        var newState = Object.assign({}, this.state);
        newState[id] = text
        this.setState(newState)
    }

    render() {
        console.log('ass')
        return (
            <View style={MainStyle.justFlexOne}>
                <View style={MainStyle.coverImageWrapper}>
                    <Image source={require('../assets/images/cursive.jpg')} style={MainStyle.coverImage}/>
                </View>
                <View style={MainStyle.mainBackground}>
                    <TouchableHighlight>
                        <Text style={MainStyle.bigFontDefault}>
                            Comma
                        </Text>
                    </TouchableHighlight>
                    <TextInput
                        style={MainStyle.TextInputs}
                        value={this.state.id}
                        editable={true}
                        onChangeText={(text) => {console.log('asdf');this.setState({id:text})}}
                        placeholder='text'
                    />
                </View>
            </View>
        )

    }
}

const MainStyle = StyleSheet.create({
    justFlexOne: {
        flex: 1,
    },
    mainBackground: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent',
    },
    bigFontDefault: {
        color: '#fafafa',
        fontSize: 60,
        textShadowOffset: {width: 0, height: 1},
        textShadowRadius: 8,
        textShadowColor: 'rgba(21,42,55,0.4)',
        fontFamily: 'Optima-Italic',
        fontWeight: '500',

    },
    coverImageWrapper: {
        position: 'absolute',
        top: 0, left: 0, bottom: 0, right: 0,
    },
    coverImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover',
    },
    textInputs: {
        height: 40,
        width: 200,
        color: '#fcc439',
        backgroundColor: 'rgba(0,0,0,0.4)',
        borderColor: '#fcc439',
    }
})

问题是，我无法在由 XCode（版本 8.2.1）操作的 iOS 模拟器 上专注于 TextInput。（这意味着我无法在输入中键入某些字符。）我已经使用 mac 键盘、触控板甚至苹果鼠标完成了我可以处理的事情（如单击、输入等...）。尽管 连接硬件键盘 已打开。

StyleSheet 也不适用于 TextInput。（它适用于其他组件。）

我该如何解决这个问题？

Answer 1

改变

style={MainStyle.TextInputs}

至

style={MainStyle.textInputs}

React Native 无法专注于 TextInput

React Native Can't focus in TextInput

ios-simulator

react-native