Question

我有TextInput看起来像这样。

 <TextInput
  autoFocus
  style={styles.inputText}
  placeholder="Type username here here"
  ref={input => { this.textUser = input }}
  value={this.state.user}
  onChangeText={(user) => this.setState({user})}
  />

现在，这是一个由TabNavigator调用的组件内部，它也被隐藏在StackNavigator内。您可以在下面看到原始的视觉表示：

[Label of Tabs below]
Home Tab (has list of users to choose from)
     | 
     ---Show Summary of User
        |
        ---Show more detail about the User

AddUser Tab

每次我点击名为AddUser且具有上述TextInput的标签时，我都可以看到我的TextInput上的光标闪烁，显然焦点正常。但是，如果我在我的Home标签上按其中一个列表（它有一个包含信息摘要的用户列表）并显示一个组件，那么一旦我返回并再次按下标签AddUser ，焦点消失了，没有闪烁的光标。此外，如果我还单击我之前提到的显示用户摘要信息的用户列表，然后再单击下一步，显示有关用户的详细信息（请参见上图）。然后返回（两次）到Home然后再次单击Add User它的工作没有问题意味着焦点在那里，光标闪烁。

以下是“用户摘要视图”组件中的代码段代码：

 <View style={{flex:10, flexDirection:'column', justifyContent:'center'}}>
      <View style={{flex:8, marginTop:40, marginBottom:40, alignItems:'center', justifyContent:'center', backgroundColor:lightBlue}}>
          <Text style={{fontSize:36, color:black, fontWeight:'bold'}}>{user.title}</Text>
          <Text style={{fontSize:24, color:gray, fontStyle:'italic'}}>{user.totalAchievements} </Text>
       </View>
       <View style={{flex:1, justifyContent:'flex-start'}}>
             <Button
                raised
                backgroundColor={white}
                color={black}
                icon={{name: 'add-circle-outline', color:black}}
                onPress={()=>this.gotoAddDetail(user)}
                title='Add Detail' />

       </View>
 </View>

我已经调试了近一整天，无法弄清楚可能出现的问题。顺便说一句，我是React和React Native的新手。

React Native中TextInput的焦点不一致

0 个答案: