Question

Hello其他程序员，我在开发这个React-Native应用程序时遇到了这个问题，我正在渲染一个“服务”的ListView，其中每行都有一个Text和一个Switch，我能够渲染它但是当我点击行的开关，将它恢复到最初的值真正快速地改变，我想知道如何保持这种变化的谷，但是因为我是新手，所以我对这是如何完成无能为力：到目前为止，我有ListView组件，我调用我的ListItem组件，继承我的代码;

errno

ListItem.js

class ListView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            servicios: []
        };
    }

    componentDidMount() {
        AsyncStorage.getItem("token").then((value) => {
            axios.get('http://MYURL/api/servicio/index?token=' + value)
                .then(response => this.setState({ servicios: response.data.servicios }))
                .catch(function (error) {
                    console.log(error);
                });
        }).done();
    }
    renderList() {
        console.log('here');
        return this.state.servicios.map(servicio =>
            <ListItem key={servicio.id} servicio={servicio} />);
    }

    render() {
        const { navigation } = this.props.navigation;
        return (
            <ScrollView>
                {this.renderList()}
            </ScrollView>
        );
    }

}

我错过了不能使这篇文章太长的样式，我可能有线索，我必须把当前的行开关状态放在州，但我不知道怎么做，我真的很高兴，如果你们可以帮助我吗？提前谢谢。

Answer 1

要更改开关的值，您需要在渲染ListView的状态下更改值。我还没有对此进行测试并从头脑中写出来，但你应该通过在这里和那里引入一些小改变来实现它：

ListItem.js

const ListItem = ({ servicio, onToggleSwitch }) => {
  const { nombre, created_at, estatus, id } = servicio;
  const { thumbnailStyle, headerContentStyle, thumbnailContainerStyle, headerTextStyle, imageStyle } = styles;

  return (
    <Card>
        <CardSection>
            <View style={thumbnailContainerStyle}>
                <Text style={headerTextStyle}>{nombre}</Text>
            </View>
            <View style={headerContentStyle}>
                <Switch value={estatus} onValueChange={(value) => onToggleSwitch(id, value)} />
            </View>
        </CardSection>
    </Card>
);
export default ListItem;

ListView.js

class ListView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            servicios: []
        };
    }

    onToggleSwitch = (id, value) => {
      const servicios = [...this.state.servicios]
      const index = servicios.findIndex(item => item.id === id)
      servicios[index].estatus = value
      this.setState({ servicios })
    }

    componentDidMount() {
        AsyncStorage.getItem("token").then((value) => {
            axios.get('http://MYURL/api/servicio/index?token=' + value)
                .then(response => this.setState({ servicios: response.data.servicios }))
                .catch(function (error) {
                    console.log(error);
                });
        }).done();
    }
    renderList() {
        console.log('here');
        return this.state.servicios.map(servicio =>
            <ListItem key={servicio.id} servicio={servicio} onToggleSwitch={this.onToggleSwitch} />);
    }

    render() {
        const { navigation } = this.props.navigation;
        return (
            <ScrollView>
                {this.renderList()}
            </ScrollView>
        );
    }

}

如何在ListView中的行内更改切换状态 - React Native

1 个答案: