|
1 |
| -# react-native-view-overflow |
| 1 | +# @react-native-oh-tpl/react-native-view-overflow |
2 | 2 |
|
3 |
| -## React Native Version Notice |
| 3 | +This project is based on [react-native-view-overflow](https://github.com/entria/react-native-view-overflow) |
4 | 4 |
|
5 |
| -This library will be useful for React Native versions below v0.57. For v0.57 and beyond, React Native supports Android overflow natively from [this commit](https://github.com/facebook/react-native/commit/b81c8b51fc6fe3c2dece72e3fe500e175613c5d4). |
| 5 | +## Documentation |
6 | 6 |
|
7 |
| -## Motivation |
| 7 | +- [中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-view-overflow.md) |
8 | 8 |
|
9 |
| -The problem is that a parent View in Android will clip the content of children Views (react-native) |
| 9 | +- [English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-view-overflow.md) |
10 | 10 |
|
11 |
| -This solves the problem of Overflow on Android (check this https://github.com/facebook/react-native/issues/16951) |
| 11 | +## License |
12 | 12 |
|
13 |
| -This could make code simpler, so you don't need to move some Components outside parents to make layout work |
14 |
| - |
15 |
| -You can read more about the motivation and this package here https://medium.com/@sibelius/solving-view-overflow-in-android-reactnative-f961752a75cd |
16 |
| - |
17 |
| -## Getting started |
18 |
| -### Steps to (mostly) automatically install react-native-view-overflow |
19 |
| -#### If you are using react-native >=0.60.0 |
20 |
| - |
21 |
| -`$ npm install react-native-view-overflow --save` |
22 |
| - |
23 |
| -#### Otherwise, if you are using react-native <0.60.0 |
24 |
| - |
25 |
| -`$ npm install react-native-view-overflow --save` |
26 |
| - |
27 |
| -`$ react-native link react-native-view-overflow` |
28 |
| - |
29 |
| -## Usage |
30 |
| -```javascript |
31 |
| -import ViewOverflow from 'react-native-view-overflow'; |
32 |
| - |
33 |
| -<ViewOverflow> |
34 |
| - <ComponentToEnableOverflow /> |
35 |
| -</ViewOverflow> |
36 |
| - |
37 |
| -``` |
38 |
| - |
39 |
| -## Usage with Flatlist |
40 |
| -To make this work with FlatList and related components you need to replace `CellRendererComponent` with `ViewOverflow`, for example: |
41 |
| - |
42 |
| -```jsx |
43 |
| -<FlatList |
44 |
| - data={this.state.data} |
45 |
| - keyExtractor={item => item.id} |
46 |
| - CellRendererComponent={ViewOverflow} |
47 |
| - renderItem={({ item, index }) => ( |
48 |
| - <ViewOverflow style={styles.item}> |
49 |
| - // item.... |
50 |
| - </ViewOverflow> |
51 |
| - )} |
52 |
| -/> |
53 |
| -``` |
54 |
| - |
55 |
| -## Usage with Animated Views |
56 |
| -To make this work in place of an `Animated.View`, you need to use `Animated.createAnimatedComponent` to create an animatable version of `ViewOverflow`. For example: |
57 |
| - |
58 |
| -``` |
59 |
| -import ViewOverflow from 'react-native-view-overflow'; |
60 |
| -const AnimatedViewOverflow = Animated.createAnimatedComponent(ViewOverflow); |
61 |
| -``` |
62 |
| - |
63 |
| -You can then use `AnimatedViewOverflow` in place of `Animated.View`. |
64 |
| - |
65 |
| -### Manual installation |
66 |
| - |
67 |
| -1. Open up `android/app/src/main/java/[...]/MainApplication.java` |
68 |
| - - Add `import com.entria.views.RNViewOverflowPackage;` to the imports at the top of the file |
69 |
| - - Add `new RNViewOverflowPackage()` to the list returned by the `getPackages()` method |
70 |
| -2. Append the following lines to `android/settings.gradle`: |
71 |
| - ``` |
72 |
| - include ':react-native-view-overflow' |
73 |
| - project(':react-native-view-overflow').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-overflow/android') |
74 |
| - ``` |
75 |
| -3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: |
76 |
| - ``` |
77 |
| - compile project(':react-native-view-overflow') |
78 |
| - ``` |
| 13 | +This library is licensed under [The MIT License (MIT)](https://github.com/entria/react-native-view-overflow/blob/master/LICENSE) |
0 commit comments