响应本机搜索并滚动以点击

Question

我需要一些帮助来实现搜索和滚动以命中本机反应。进行了大量搜索并最终陷入了死胡同（找到了一些refs我无法开始工作的示例）。

尝试构建此代码段作为开始：

https://snack.expo.io/@norfeldt/searching-and-scroll-to

import React, { Component } from 'react';
import { Text, View, ScrollView, TextInput, StyleSheet } from 'react-native';

export default class App extends Component {

  state = {
    text: '41'
  }

  render() {
    return (
      <View style={styles.container}>

      <TextInput
        style={{height: 60, borderColor: 'gray', borderWidth: 1, borderRadius: 10, margin: 5, padding:30, color: 'black', }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />

      <ScrollView >

          {[...Array(100)].map((_, i) => {return <Text style={styles.paragraph} key={i}>{i}</Text>})}

      </ScrollView>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 10,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

任何帮助入门将不胜感激。

Answer 1

脚步

1. 使用 记住每个项目的位置onLayout。
2. scrollTo()文本输入时的位置，并且仅当找到项目时。

代码

const styles = StyleSheet.create({
    textinput: {
        borderBottomColor: 'purple',
        textAlign: 'center',
        borderBottomWidth: 2,
        height: 40,
        marginTop: 20,
    },
    text: {
        textAlign: 'center',
        fontSize: 16,
        margin: 10,
    } 
});



export class App extends Component {
    data = [];
    datapos = {};
    scrollref = null;
    constructor(props) {
        super(props);
        /// make 100s example data
        for (var i =0; i<100; ++i)
            this.data.push(i);

        this.state = {
            inputvalue: '0'
        }
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <TextInput style={styles.textinput}
                    value={this.state.inputvalue}
                    onChangeText={(text) => {
                        this.setState({inputvalue: text});
                        let y = this.datapos[+text];
                        y !== undefined && this.scrollref.scrollTo({ y, animated: true });
                    }}
                />
                <ScrollView
                    ref={(ref) => this.scrollref = ref}
                    >
                    {
                        this.data.map( (data) => (
                            <Text style={styles.text}
                                key={data}
                                onLayout={(layout) => this.datapos[data] = layout.nativeEvent.layout.y}
                                >{data}</Text>
                        ))
                    }
                </ScrollView>
            </View>
        )
    }
}

结果：