2019-05-27 13:46:34 qq_31629679 阅读数 420

只在Android中出现报错

null is not an object(evaluating _reanimatedModule.default.configureProps)

原因:

我们在react项目中安装了 react-native-reanimated 库
这时只需要link一下这个库

解决:

执行:react-native link react-native-reanimated
就OK了

2017-06-02 16:57:09 a992036795 阅读数 437

ReactNative开发——Text组件

Text组件用来显示一段字符串,在React Native开发中,所有需要显示的字符串都需要放置在Text组件或者有他派生出的TextInput组件中。

  • Text内部的元素不在使用flexbox布局,而是采用文本布局。

基本属性

export default class Project07 extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}
                      numberOfLines={5} //设置显示多少行
                >
                    Welcome to React Native!
                    {'\n\n'}
                    xxxxxxxxxxxxx
                </Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        margin: 10,
        fontSize: 20, //字体大小
        fontFamily: 'Cochin', //字体,可以取值:scans-serif,serif,monospace .....
        fontWeight: 'bold', // 字体的粗细,可以取值: normal,bold 100,200,300,....900
        textAlign: 'auto', //决定的字符串如何排列,可以取值:left,right,center,auto,justify
        fontStyle: 'italic', //字体风格,可以取值:normal,italic
        textShadowColor:'red', //阴影颜色
        textShadowOffset:{width:10,height:10},//阴影偏移
        textShadowRadius:5,//阴影角度
        padding:20,// 内间距


        letterSpacing: 20,// ios 描述每个字符之间可以插入多少空间
        writingDirection: 'rtl',//ios 书写方向,可以取值:auto,ltr,rtl

        //  ...
    },
});

样式键设置

属性
fontFamily 字体
fontWeight 字体的粗细,可以取值 bold,normal 100,200 ……900
textAlign 决定字体的排列,auto,left right,center ,justify
fontStyle 字体的风格,italic,normal
textShadowColor 阴影颜色
textShadowOffset 阴影偏移
textShadowRadius 阴影角度
等等…. 省略…..

其他属性

属性
numberFontScaling 布尔类型,ios操作系统专用,表示显示的字体是否要根据为失能者的设置而改变
numberOfLines 数值类型,表示Text组件中的字符串可以显示为多少行
onLayout 布局完成的回调
onPress 点击回调

Text组件的嵌套

当使用嵌套的Text组件时,子Text组件不能覆盖父组件继承而来的样式,只能增加父组件没有指定的样式,如果试图在代码中覆盖从父组件继承而来的样式,覆盖将不会生效,并且在开发模式下回弹出警告。

export default class Project07 extends Component {
    render() {
        return (
            <Text
                style={styles.parent}
            >
                我是Cochin字体
                <Text style={styles.child}>
                    {'\n'} 我是20号的Cochin字体
                </Text>

                <Text>
                    {'\n'}当当当
                </Text>
            </Text>
        );
    }
}

const styles = StyleSheet.create({
    parent: {
        fontFamily: 'Cochin',
        fontStyle: 'italic',
    },
    child: {
        fontSize: 30,
        fontStyle: 'normal'
    },}

我在内部的那个Text中加入了{‘\n’}用来换行,因为是线性布局,如果不加的话,里面那个组件的内容将和外面的Text组件的内容显示子在同一行。

Text居中显示

因为Text是线性布局而非flex布局,所以要想让他的内容居中显示的话,解决办法就是在外面嵌套一个View,让Text本身在这个View中居中显示好了。


export default class Project07 extends Component {
    render() {
        return (
            <View
                style={styles.parent}
            >
                <View style={styles.view}>
                    <Text >
                        我是第一个文本
                    </Text>
                </View>
                <View style={styles.view}>

                    <Text>
                        我是第二个文本
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    parent: {
       flex:1,
        backgroundColor:'gray',
        justifyContent:'center'

    },
    view:{
        marginTop:10,
        height:200,
        backgroundColor :'orange',
        justifyContent:'center',//让他内部的Text居中显示
        alignItems:'center'
    },

这里写图片描述

在Image中插入图片:


export default class Project07 extends Component {
    render() {
        return (
            <Text>
                这里将会出现一个图片,看:<Image source={require('./img/ic_launcher.png')}/>
            </Text>
        );
    }
}

参考

http://reactnative.cn/docs/0.44/text.html#content

2018-03-29 17:19:32 linnvv_0011 阅读数 86

ReactNative错误记录1, 第一个ReactNative程序


不能使用的旧代码

  • 旧代码:

    let HelloWorld = React.ceateClass({
     render: function() {
          return (jsx code);
     },
    });
  • 新代码:

    export default class App extends Component<{}> {
     render() {
         return (jsx code);
     }
    };
    
  • 另外,新的代码也不需要注册组件,如下代码不再需要

    AppRegistry.registerComponent("HelloWorld", () => HelloWorld);

导入库操作新旧版本差异

  • 旧版本ES导入库操作:

    let React = require('react-native');
    let {
     AppRegistry, StyleSheet, Text, View, TexInput
    } = React;
  • 新版本(ES6)导入库语法:

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

出错界面,调试

  1. 红屏界面下方有reload按钮,修改了js文件之后,可直接重新加载页面,不用(好像也不能)通过摇一摇弹出包含reload操作的列表。
  2. 在react-native start进程执行过程中及红屏页面都有可能输入callstack,方便查找出错路径。
  3. ES6与ES6主要体现在创建视图组件及导入库的操作上,jsx代码以及stylesheet代码似乎并无太大变化。
2019-06-13 18:04:55 weixin_40333612 阅读数 354

ReactNative搜索页面实现


注意:具体实现分析以及效果图可以参考简书链接

简书链接.

具体实现代码片

1、初始化.

export default class PostSearchView extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            placeholder: '搜索',
            isPostList: false, //是否搜索
            keyword: '',//搜索关键字
            searchHistory: [],// 搜索历史数组
            hotTagsArr: [],// 热门搜索标签数组
        };
    }
    componentDidMount() {
        this._getHotWords()
    }
    componentWillMount() {}

2、方法.

    //获取搜索列表数据
    _getHotWords() {
        ModalIndicator.show('请求中...')
        let params = '{"data":{}}'
        this._post('common/v2/campus/getHotWords', {},
            params, true, data => {
                ModalIndicator.hide()
                if (data.code == 0) {
                    console.log('hotTagsArr: ' + data.data)
                    console.log('hotTagsArr: ' + data.data.hot_words)
                    if (!_.isEmpty(data.data.hot_words)) {
                        this.setState({
                            hotTagsArr: data.data.hot_words,
                        })
                    } else {
                        this.setState({
                            hotTagsArr: [],
                        })
                    }
                } else {
                    _showModalMessage(this.props.navigation, data.msg);
                }
            }, err => {
                ModalIndicator.hide()
                console.log('err: ', err)
            })
    }
    
    //关键字改变
    onChanegeTextKeyword(Val) {
        let keys = {};
        //输入的关键字去空格空字符
        let newVal = Val.replace(/(^\s*)|(\s*$)/g, "")
        if (!_.isEmpty(newVal)) {
            keys = {
                keyword: newVal
            };
            this.setState({isPostList: true})
        } else {
            Toast.message('请输入搜索关键字', null, 'center')
        }
        this.setState({keyword: keys});
    }

    //历史和热门标签值赋值输入框
    _setValues(item) {
        this.setState({value: item})
    }

    //聚焦
    _onFous(v) {
        if (v.nativeEvent.target) {
            this.setState({isPostList: false})
        }
    }

    //删除历史搜索数据
    _deleteHistory() {
        // 判断是否有本地搜索历史
        if (this.state.searchHistory.length > 0) {
            Alert.alert(
                '提示',
                '确定清除所有历史搜索记录吗?',
                [
                    {text: '取消', onPress: () => console.log('取消'), style: 'cancel'},
                    {
                        text: '确定', onPress: () => {
                            Toast.message('清除历史搜索记录成功', null, 'center')
                            removeItem("searchHistory");
                            this.setState({
                                value: '',
                                searchHistory: [],
                            })
                        }
                    },
                ]
            )
        }
    }

    //获取历史记录
    _getHistory() {
        // 查询本地历史
        getItems("searchHistory").then(data => {
            if (data == null) {
                this.setState({
                    searchHistory: [],
                })
            } else {
                this.setState({
                    searchHistory: data,
                })
            }
        })
    }

    // 保存搜索标签
    _insertSearch(newText) {
        let text = newText.replace(/(^\s*)|(\s*$)/g, "")
        if (!_.isEmpty(text)) {
            if (this.state.searchHistory.indexOf(text) != -1) {
                // 本地历史 已有 搜索内容
                let index = this.state.searchHistory.indexOf(text);
                let tempArr = arrDelete(this.state.searchHistory, index)
                tempArr.unshift(text);
                setItem("searchHistory", tempArr);
            } else {
                // 本地历史 无 搜索内容
                let tempArr = this.state.searchHistory;
                tempArr.unshift(text);
                setItem("searchHistory", tempArr);
            }
        }
    }

3、UI渲染.

render() {
        return (
            <View style={styles.container}>
                {/*监听页面,刷新搜索本地历史历史*/}
                <NavigationEvents onWillFocus={() => {
                    //查询本地搜索历史
                    this._getHistory();
                }}/>
                <Header title='搜索'
                        navigation={this.props.navigation}
                        show_close_img={true}
                />
                <View style={styles.inputBox}>
                    <View style={styles.inputIcon}>
                        <Image source={require('../../imgs/public_icon_search.png')}/>
                    </View>
                    <TextInput style={styles.inputText}
                               autoCapitalize="none"
                               value={this.state.value}
                               onChangeText={(text) => this.setState({value: text})}
                               onSubmitEditing={() => {
                                   //开始搜索
                                   this.onChanegeTextKeyword(this.state.value);
                                   // 保存搜索内容
                                   this._insertSearch(this.state.value);
                               }}
                               returnKeyType="search"
                               underlineColorAndroid="transparent"
                               placeholder={this.state.placeholder}
                               placeholderTextColor={'#BFBFBF'}
                               onFocus={this._onFous.bind(this)}
                               autoFocus={true}
                               defaultValue={this.state.value}
                               keyboardType="default"/>
                </View>
                <View style={styles.lin}/>
                {
                    (this.state.isPostList) ?
                        //列表
                        <ScrollView style={styles.scrollView}>
                            <View style={styles.listView}>
                                <PostSearchList keyword={this.state.keyword}{...this.props}/>
                            </View>
                        </ScrollView>
                        :
                        //历史和热门
                        <ScrollView style={styles.scrollView}>
                            <View style={styles.head1}>
                                <Text style={{fontSize: scale(14), color: "#333"}}>{"历史搜索"}</Text>
                                <TouchableOpacity activeOpacity={0.3} onPress={() => this._deleteHistory()}>
                                    <Image source={require('../../imgs/public_icon_del.png')}/>
                                </TouchableOpacity>
                            </View>
                            {
                                this.state.searchHistory.length > 0 ?
                                    <View style={styles.queryList}>
                                        {this.state.searchHistory.map((item, index) => {
                                            return (
                                                <View key={index}>
                                                    <TouchableOpacity onPress={() => {
                                                        //去搜索
                                                        this.onChanegeTextKeyword(item);
                                                        //给输入框赋值
                                                        this._setValues(item);
                                                        // 保存搜索内容
                                                        this._insertSearch(item);
                                                    }} activeOpacity={0.3}>
                                                        <Text numberOfLines={1} style={styles.queryItem}>{item}</Text>
                                                    </TouchableOpacity>
                                                </View>
                                            )
                                        })}
                                    </View>
                                    :
                                    <View style={styles.noData}>
                                        <Text style={styles.noDataTxt}>暂无搜索历史</Text>
                                    </View>
                            }
                            <View style={styles.head}>
                                <Text style={{fontSize: scale(14), color: "#333"}}>{"热门搜索"}</Text>
                            </View>
                            {
                                this.state.hotTagsArr.length > 0 ?
                                    <View style={styles.queryList}>
                                        {/* 热门搜索标签渲染 */}
                                        {this.state.hotTagsArr.map((item, index) => {
                                            return (
                                                <View key={index}>
                                                    <TouchableOpacity onPress={() => {
                                                        //去搜索
                                                        this.onChanegeTextKeyword(item);
                                                        //给输入框赋值
                                                        this._setValues(item);
                                                        // 保存搜索内容
                                                        this._insertSearch(item);
                                                    }} activeOpacity={0.3}>
                                                        <Text numberOfLines={1} style={styles.queryItem}>{item}</Text>
                                                    </TouchableOpacity>
                                                </View>
                                            )
                                        })}
                                    </View>
                                    :
                                    <View style={styles.noData}>
                                        <Text style={styles.noDataTxt}>更多热词敬请期待</Text>
                                    </View>
                            }

                        </ScrollView>
                }
            </View>
        )
    }
}

3、样式style.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    inputBox: {
        height: Platform.OS === 'ios' ? 25 : 35,
        marginLeft: 15,
        marginRight: 15,
        flexDirection: 'row',
        backgroundColor: '#F4F4F4',
        borderRadius: 8,
        borderWidth: 0,
        marginTop: 10,
    },
    lin: {
        height: 1,
        marginLeft: 5,
        marginRight: 5,
        backgroundColor: '#f1f1f1',
        marginTop: 10,
    },
    scrollView: {},
    listView: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        marginLeft: 0,
        marginRight: 0,
        marginTop: 10,
    },
    head1: {
        paddingHorizontal: 16,
        marginTop: 18,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between"
    },
    head: {
        paddingHorizontal: 16,
        marginTop: 8,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between"
    },
    queryList: {
        marginTop: 10,
        marginRight: 16,
        marginLeft: 16,
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "center",
        backgroundColor: "#fff"
    },
    queryItem: {
        flex: 1,
        fontSize: scale(12),
        backgroundColor: '#F4F4F4',
        paddingHorizontal: 30,
        paddingVertical: 6,
        borderRadius: 3,
        marginRight: 10,
        marginBottom: 10
    },
    inputIcon: {
        margin: Platform.OS === 'ios'
            ? 5
            : 10
    },
    inputText: {
        flex: 1,
        paddingLeft: 5,
        textAlignVertical: 'center',
        paddingVertical: 0
    },
    noData: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#fff",
        marginTop: 10,
        marginBottom: 12,
    },
    noDataTxt: {
        fontSize: scale(12),
    },
});
2017-01-19 11:06:11 rn_android_lf 阅读数 124
1.Unable to resolve module xxxxx from Module does not exist in the module map or in these directories:
出现这个问题,最后解决方法:
要跳转至的页面,别直接
export  default class;
先建class,最后再export default,问题解决,原因,待探究。
2.找不到路径的问题,有一点要注意同级目录import别忘记./,如./main,不能直接写main.
没有更多推荐了,返回首页