Question

环境

本机：“ 0.61.5”，

“样式化的组件”：“ 4.4.1”

复制

小吃示例：https://snack.expo.io/BJSfYqlCS

import * as React from 'react';
import styled from 'styled-components'
import {View} from 'react-native'

export default () => {
  const [text, setText] = React.useState('');

  const StyledInput = styled.TextInput`
    background-color: red;
    border-color: black;
  `

  return (
    <View>
      <StyledInput value={text} onChangeText={text => setText(text)} />
    </View>
  );
}

复制步骤

在样式为TextInput的内容中键入内容

预期行为

只需键入

实际行为

失去焦点

Answer 1

所以这个问题非常棘手，看来问题是您在其父返回方法中定义了StyledInput，然后直接调用父级的setText方法（而不是通过props），这导致您不重新渲染不想。

更好的方法是使用直接文本输入并对其应用样式。请参见下面的代码，并且ive还分享了博览会小吃中的一个有效示例。进行检查。

import * as React from 'react';
import styled from 'styled-components'
import {TextInput,View} from 'react-native';

export default () => {
  const [text, setText] = React.useState('');

  const StyledView = styled.View`
    flex: 1;
    align-items:center;
    justify-content: center;
    background-color: papayawhip;
  `

  const StyledInput = styled.TextInput`
    background-color: white;
  `

  const StyledText = styled.Text`
    color: palevioletred;
  `

  return (
    <View>
      <StyledText>Hello World!</StyledText>
      <TextInput style={{height:50,width:50,backgroundColor:'red'}} value={text} onChangeText={text => setText(text)} />
    </View>
  );
}

博览会小吃expo url

希望有帮助。毫无疑问

Answer 2

使样式失去功能

import * as React from 'react';
import styled from 'styled-components'
import {View} from 'react-native'

const StyledInput = styled.TextInput`
    background-color: red;
    border-color: black;
  `

export default () => {
  const [text, setText] = React.useState('');

  return (
    <View>
      <StyledInput value={text} onChangeText={text => setText(text)} />
    </View>
  );
}

选中expo shack

React Native TextInput失去了对useState

2 个答案: